KANZAKI KAINE WEBSITE - WD

CODA + Zencoding

admin — Thu, 11 Mar 2010 17:59:07 +0000

久しぶりのエントリーです。　すっかりもうすぐ春ですけど、まだ寒いです的季節になってしまいましたが。

先日会社の同僚にzencodingなるものを教えてもらいました。
何かというと、HTMLとCSS（PHPも？？あるのかな？？）のコーディングを決められたセレクターを入力すると補完してくれる便利プラグイン（みたいなもの）です。

会社ではDwCS3を使っているのですが、どうも現行でリリースされているのはCS4向けのようで、キーボードショートカットの割当の問題なのか、うまく動いてくれませんでした。
しかし、調べてみるとDwの他にもいろいろなソフト向けにリリースされているみたいなので、自宅で使っているCODAにも早速インストールしてみました。

以下、自分メモ（ちょっと整形がおかしいですが…後で直します；）

まずはここからダウンロード
ZIPファイルを解凍すると、codaplaginファイルが現れるので、ダブルクリックでインストール。
CODAを行ったん終了して、もう一度CODAを起動します。メニューに「プラグイン」「Tea for CODA」が出てくればインストール成功しているともいますが、出て来ないという方は、お手数ですが、マシンごと再起動してみてください。CODAが最新版であればこれで問題なくインストールされると思います。
適当に新規作成を開いて、「html:5」と打って「control＋,（カンマ）」と叩くとHTML5のDOCTYPEつきのひな形が現れると思います。

ちなみにデフォルトのままだと、lang属性がen-USとかになっていると思います。
これを変更するにはuser→「ユーザー名」→「ライブラリ」→「Application Support」→「Coda」→「Plug-in」に格納されている「TEAforCoda.codaplugin」ファイルを右クリックメニューの「パッケージの内容を表示」で開きます。
「Support」→「Library」→「zencoding」→「zen_settings.py」をCodaで開いて、ライン11あたりにある下記の部分を書き換えます。

#    Variables that can be placed inside snippets or abbreviations as ${variable}
#    ${child} variable is reserved, don’t use it
‘variables’: {
‘lang’: ‘en’,
‘locale’: ‘en-US’,
‘charset’: ‘UTF-8′,
‘profile’: ‘xhtml’,

#        Inner element indentation
‘indentation’: ‘\t’
},

を

#    Variables that can be placed inside snippets or abbreviations as ${variable}
#    ${child} variable is reserved, don’t use it
‘variables’: {
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,
‘charset’: ‘UTF-8′,
‘profile’: ‘xhtml’,

#        Inner element indentation
‘indentation’: ‘\t’
},

と書き換えてください。

保存したらCodaを終了して、もう一度起動してください（マシンは再起動不要）。

とりあえず、html:5と打って「Control+,」してみて

と出てくればOKです（多分）。

ちなみに、上記の方法は自分で調べてやってる部分が強いので、やるときは各自自己責任でお願いします。
Coda壊れたら……またダウンロードして再インストールすればなおると思います（多分）。
Macが壊れたら、素直にAppleケアセンターに電話してください（苦笑）。

MODxをローカル環境にインストールしてみた

admin — Tue, 08 Dec 2009 15:59:13 +0000

大分前の勉強会で詳細されていたCMS「MODx」をローカルの環境にインストールしてすこし触ってみました。なんとなくの感想を箇条書きしてみます。

インストールは凄く簡単。Wordpressのようにconfigファイルを編集することもないし、パーミッションの設定もない、php my adminとか使って、あらかじめDBを用意する事もなく、DB情報（ホスト名とかその辺）だけ控えて、その辺の準備もインストーラー一本でやってしまうので、手軽です。
GIはどのCMSよりもきれいで、Ajaxとかも効果的に使ってて美しいのですが、まだ基本的な「どこになにがあるのか」とか「ここを編集するとどこに反映されるのか」などが良く分かっていない故に、ごちゃごちゃとしてて、目的のものを探すのにもたつく。
公式サイトのHow toを見てみて、何となくテンプレートなどはHTML+CSSコーディングが普通に出来るWEBデザイナーには結構なじみやすいのかもしれない。
もうちょっと触ってクライアントとかに使い方説明など一通り出来るようになったら、小規模案件には使えそう。でもその前に構成などの調査は最低限必要かな。。。　なので即戦力にはならない、かも。

なんか悲観的な感想ばっかり並んでますが、MTやWPも優れたCMSではあるのですが、やはり得意不得意な部分はあるので、案件に会わせていろんなCMSが使えるようになった方が仕事は取りやすくなるのかもしれません。　企業はその内部調査に対して先行投資を強いられますが…WEB屋…だけじゃなくどこの業界でも言える事だと思いますが、何を商売するにしても先行投資は必要なんで…その辺は会社のエラい人を説得する必要はあるかな、と。

だけど、最近CMS案件に関わっていて思うのは、いくらCMSを導入したからって、更新しないと意味ないんだけどなー、という事です。HTML書く、もしくは書けない人でも、アウトソーシングなどのコストを省く為にCMSを導入するケースが多いと思うのですが、更新さぼってるお客さんとか見るとホント「もったいねー」と思う事はよくあります。

CMSにしたからって、更新しない事にはウェブサイトの価値は下がる一方だという事を、クライアントさんに分かってもらう事が一番重要なんじゃないかな？　と思う今日この頃でした。

とエラそーな事いってるけど、このサイトも更新が滞りがちです。。。。　まあ、目的は自分的備忘録なんで…勘弁してください。

WDE09に参加してきました

admin — Mon, 16 Nov 2009 14:00:20 +0000

先日WDE09に参加してきました。参加したのは12日のニコール・サリバン氏のワークショップと13日のカンファレンスです。

ワークショップはテーマが「WEBサイトパフォーマンス入門」ということで、結構知っているテクニックもありましたが、参考になる情報も沢山得られたので、良かったです。普段Photoshop使いなのでFireworksのPNG8のアルファ保存（といえばいいのか？）とか初めて知った…。

カンファレンスの方はデザイン関連のセッションを聞いてきました。ダグラス・クロックフォード氏の話はちょっと難しく感じたのですが、ちょっとびっくりする内容でした。

そのあとのアフターパーティにも参加して、沢山の方と名刺交換させていただきました。途中切らしてしまって、申し訳なかったです。でも、参考になる話や。、面白い話も沢山聞けたので楽しかったです。
やっぱり、ああいうイベントに参加すると勉強にもなるし、自分の技術レベルとかも分かるからモチベーションが上がりますね〜。

気がついたら秋ですね

admin — Fri, 18 Sep 2009 16:10:54 +0000

気がついたらもう秋でした。早いです。ついでに今年も一つとしとりました。。。。最近誕生日が来てもあんまり嬉しくないのは何でだ（苦笑）

最近はデザインの仕事とはちょっと離れてクライアントさんとの打ち合わせが中心になってきました。ディレクションと言えばそうなのかもしれないのですが、なんかそんなにエラそうなことでもないです。なんか、もうどれくらいうまく根回ししておくかとかどれくらいサービスして次につなげるかとかそんな事ばっかりです。

で、ちょっと自分の中で熱いのがサイトフロー作成。こういう地味な作業大好き。新規の案件よりリニューアル案件のサイトフローなんか作ったあとの達成感が好きです。（まだ案件納品していないのに…）
リニューアルの目的にもよりますが、私の手元に来る案件は大抵コンテンツを盛り込みすぎてごちゃごちゃしてて何がなんだか良くわからなくなってしまったサイトの改善が多いので、「どれだけコンテンツを整理整頓できるか」が試されるので最初は大変なんですがなんか自分の頭の中も整理されていくみたいで気持ちがいいです（笑）。しかも散らかってれば散らかってるほど燃える（やり始めは大変だけど）。あとアクセス解析とかも見ながらユーザーの導線を検証したりもします。

そんなこんなで帰りが午前様な日々がここ3ヶ月くらい続いていますが、また何かネタがあったら描こうと思います。

コメントについてはいただいたものにはすべて目を通しています。余裕が無いのでレスがつけられないのですが、ホントにありがたい事です。ありがとうございます。

6/27のSwapSkillsに参加してきました

admin — Sun, 05 Jul 2009 14:38:48 +0000

6/27のSwapSkillsに参加してきました。ちょっと前日まで忙しくてあるまじきことか寝坊して遅れての参加だったので、一番の目当てだった長谷川さんのプレゼンが最初から聞けなかったのが残念でした。いや、自業自得です。

内容は「CMS導入前のマネージメント強化！　コンテンツマネージメントの核　〜制作費下落スパイラルを止めるにはこれしかない！〜」ということで、長谷川さんのセッションでは「ウェブに向けたコンテンツ配信と戦略」、株式会社エヌプラスの中村さんのセッションでは「Webライティング基礎講座　1時間で身に付く　コンテンツの付加価値を高めるライティング技術」ということで、どちらとも技術的なプレゼンではなく、「コンテンツを充実させることでより効果的なWEBサイトを構築するためのノウハウや考え方」というマーケティングやマネジメント、コンサルタント的なプレゼンでした。

長谷川さんの話の内容の概要としては…

ウェブにおけるコンテンツとは
オフライン＆オンラインメディアのコンテンツの特徴
ブランド今昔
現在のウェブサイト制作の問題
ウェブコンテンツの真実
コンテンツを軸にしたサイト制作
効果的なコンテンツをつくるコツ

というセッション内容で、WEBの特徴を生かしたコンテンツ制作を行うことでユーザーにより「使ってもらえるWEBサイト」と構築することで費用対効果を向上を目指す、という感じの内容のお話でした。

長谷川さんのプレゼンは毎回内容としては結構レベルの高い話（でもよくよく考えてみると結構基本的なこと）だと思うのですが、具体的な実例を紹介したり、プレゼンシートも視覚的にわかりやすく、見た目にも見ている側を楽しませるような工夫がされていて、私のような物わかりの悪い若造でも楽しく勉強できて理解できるようなプレゼンで毎回楽しく拝聴しています。プレゼンとは全然関係ないんですが、たまに長谷川さんのサイトに登場する長谷川さんの飼い猫のミコちゃん、かわいくて、たまに長谷川さんのFlickrとか見てニタニタしてます。

中村さんの話の概要としては…

コンテンツの訴求力を高めるライティング技術（キャッチコピーや見出しなど）
ユーザーの心を動かし、サイトのブランド価値を向上させるライティング力養成校正・校閲の基礎

というセッション内容で、中村さん自身元編集者としての立場から、「どういったライティングをしていくことでユーザーの心をつかむか」また、「ユーザーの心を動かし、コンテンツ価値を高めるためのライティング技術はどういうプロセスで作成するか」というお話をされていました。

話を聞いていて、所々長谷川さんのセッションとリンクしたような内容だったので、後で「あれって打ち合わせとかしてるんですか？」みたいなことを聞いたら、「特にしていない」ということでした。す、スゲー…。元々双方ともコンテンツ制作の話だったので、近いところもあったとは思うのですが、打ち合わせなしでちゃんと全セッションとの関係性を持たせるような話の持っていけるって、結構難しいように思うんですが…やっぱり文章力がある人って話し上手なんですかね。会話のレパートリーがあるっていうか。

ちなみにライティング力を高めるためのトレーニングとして有効なのは「新聞を読むこと」だそうです。…新聞か…専門書とか小説とかは読むけど新聞は読まないな…そういえば。ネットニュースで済ませてしまう現代っ子です。読むように心がけます。

その後の懇親会も参加させていただきました。CMSのプレゼン方も一緒でいろんなお話が聞けて楽しかったです。菊池さんのトロピカーナのTシャツは最後までネタとして引っ張られてました…。まずはそのTシャツを卒業してポロシャツに転身すると良いと思います。

DBD::mysql と奮闘中

admin — Tue, 16 Jun 2009 15:31:25 +0000

仕事の関係でMTを覚えなくてはいけなくなり（今後コンスタントに案件が依頼される可能性が出てきたので…）、とにかく時間を作って家でもいじれるようにしようと自宅の作業機にMTをインストールしようといろいろ準備しているのですが、MAMPのインストールとDBIのインストールまでは難なくクリアできたのですが、DBD::mysqlだけどうしてもインストールできない負のスパイラルにハマっています。

症状としてはMakefileまでは成功しているようです。問題はその後のコンパイルがどうしてもうまくいかないみたいです。なんとなく「このファイルがないぜ」とか「このディレクトリ見つからんよ」みたいなエラーが出ているのは確認できるんですが、いかんせんSEでもPGでもないんではっきり原因が分からないんですよね。
ググって同じ現象にあったことがある方を探してみて入るものの、基本的に個人的メモなのであまり詳しく書いてなかったりするんですよね〜。困ったなぁ。。。

最終手段としては職場のPGさんとかに聞くのが手っ取り早いけど、エラーの説明がどう説明したもんかというのもありますが、リモートされてブラウザの履歴とかみられてもめちゃくちゃ困る。（マジほんといかがわしいモンのオンパレードですよ。）

MTは最悪SQLiteでも動くのでDBはそっち使おうかな。
自分アホだから WPと同じ要領でhtdocsに突っ込んでmt-check.cgi「動かねー動かねー」とうなってて、よくよく考えたらMTはperlで動いてんだったってことをさっき思い出して、そこだけはすっきり…したけど自分のうっかり加減にブルーになりました。

あと前々から思うこと。
そろそろMTのリッチテキストエディタの馬鹿さ加減というか空気読めないのはどうにかならんもんかね。WP使い慣れてると使いづらいことこの上ない。。。

Safari4 Release

admin — Wed, 10 Jun 2009 15:47:25 +0000

Safari4が正式リリースされましたね。Beta版とは若干インターフェースがかわっていますが、TopSiteはすごく使いやすくてお気に入りです。

あとは簡単にキャプチャを取ってくれるプラグインとか、Firefoxで出回っているようなプラグインがあればいいのですが、まだまだちゃんと探せていないのですよね。

というかSafariってプラグインのインストール面倒。Firefoxみたいに2-3クリックで簡単にできるようにすればいいのに。iPhoneのAppstoreを見習って。

HTML5とCSS3が対応になっていますが、こちらはまだしばらくは趣味で使うような感じですね。まだまだほかのブラウザが遅れているんで。
少なくてもIE8のシェアが(CSS3とかと関係ないけど）40％越えとかIE9Beta番とかでないと何となく業務に使う気になれません。でも勉強はしておかないといけませんね。

html-lintが100点である必要性？

admin — Wed, 10 Jun 2009 15:31:57 +0000

聞いたときは何で今更とか思ったんですが、最近はこの手の話を持ち出してくるSEO業者さんがいるようです。個人的には「100点だからってなんかいいことあるんですか？」って感じだったんですが。

というのも個人的にhtmllintで100点をとっても、HTML文書がセマンティックにマークアップされていなければそもそもXHTML+CSSでコーディングする意味が薄くなってくると考えてます。あくまで個人的見解なんで正しいかと聞かれると言い切れない部分もあるんですが。
lintで100点を取るためには必ずXHTMLであれば先頭にXML宣言を書かなくてはいけなくなります。しかしIE6がXML宣言を追加することでレンダリングモードが後方互換になるというバグを持っているため、CSSのレイアウトが崩れるという悲劇が起こり、結果的にはレイアウトのために意味のないDIV要素を乱用しなくてはいけないことになります。これって手段は違うけど結果的にはテーブルレイアウトと同じことやっているよなものです。

CSSだってIE6だけのためにハックを多用しなければいけなくなります。これはメンテナンス性を下げる原因にもなるので、私たち制作側からすればできればさけたいかなと思う手段です。

XHTMLにこだわらなくていいのであればHTML4.01で書く手段もありますが…将来性のことを少し考えるとちょっとどうなんでしょうかねって感じです。特に最近はクライアントさんも中途半端にHTML知ってるとか「ビルダーで作ってたんでだいたいわかります」とかいう人がお客さんにいる場合はメンテナンスのとき変なタグ（fontとかiとか）が使われていないか注意が必要です。結構めんどうなんですよね、こういうの。（大抵は中途半端にいじってレイアウトが崩れて自分で直せなくなっちゃったから元に戻してください。もちろんこれくらいはサービスですよね？笑顔って感じで駆け込んでくることがよくあります）

W3C準拠を唱っている業者もまれに怪しいケースがあります。W3cの準拠ってことはValidationServiceでPASSが出てれば準拠しているということです。そこにはセマンティックでマークアップされているかの保証はあまりありません。ってことはやっぱり文書構造は最終的にヒトの意思と解釈などで文書の意味を読み取ってマークアップする必要がありますよね。HTMLの仕様書で定義されている要素ですべての文書をセマンティックにマークアップなんてちょっと無理があると思うし。（そのためにmicroformatsがある訳ですけど）

SEO業者さんの営業を聞いていると、「それって中途半端に説明したらいらん誤解が起こると思うよ」ということを平気で言っているケースがあるようです。「まあそういう説明した方がお客さんにはイメージしやすいかもね」というのはわからんでもないけど、もうちょっと親切に説明してよというのが、制作側の声です。

たしかにマークアップってデザインと違って目に見えない部分だし、地味かもしれませんがそのうち「こいつのマークアップは秀逸なんだ！」とかそういう風にいわれるようになりたいものですね。

マークアップとブラウザシェア

admin — Thu, 04 Jun 2009 16:17:41 +0000

今日、会社の人と話題になった事が「ブラウザシェアって、海外はそういうことを専門的に調査してくれている企業があるけど、日本はあまりない…というか全くないのか？」ということです。

マークアップをしている際に一番気になるのはやっぱりユーザー側のブラウザシェアです。特に今の会社はクライアントが公的機関だったり、そこそこ大きい企業さんだったりするもので、そう言った所は大抵の場合メンテナンス性の関係で、ブラウザなども統一されている事もあったり、特にシステムなんかを業務で使っている企業さんにもなるとブラウザはIE6限定というケースが多いです。でもクライアントサイドのブラウザシェアに合わせるのは危険じゃないかと言うのは私個人としての考え方です。
それだったらアクセス解析などでクライアントのサイトを訪問しているユーザーのブラウザを確認してそれに合わせた方がユーザビリティ的には良いのではないかと。

とは言っても、ターゲットが絞れないケースもあるので、やはり国全体でのブラウザシェアは知っておきたいですよね。
しかし、過去にいろんな検索キーワードで探してみたのですが、今の今まで引っかかって来たページはそのどれもが、どんなに最新のものでも、その日から3ヶ月前のデータと言うのが殆どです。私は今現在のシェアが知りたいのに。

その話を会社の人にぼやいてたら一応機会があったら聞いてみるよ〜とは言ってくれました。私は人脈が薄いのでなかなかそう言う事が出来ないので助かります。
他にも情報があったら欲しいですね。もちろん自分でも調べますが。

続・Safari4

admin — Tue, 12 May 2009 16:11:06 +0000

前回、Safari4とFirefox3は動作的に大差ないという事を書きましたが、前言撤回。

Safari4の方がやっぱり早いです。

そんな訳で、ここでもう一回レヴューしてみようと思います。

起動の速さはOpera並み。惚れる。
OSがMacだとさすが純正だからかいろいろ使い勝手が良い感じです。WEBページの切り抜きとか、ちょっとしたメモ代わりにかなり大活躍。
Topsiteのアレは結構良いかも。新規タブを開いた時に頻繁に訪問するサイトとかあると、毎日の日課である「WEBサイトチェック」とか快適ですね。
Web Inspectorは使い慣れればFirebug と同じくらい使いやすい。ただし見やすさはFirebugの方が良いかな。でもXRAYがあれば苦には感じないかも。どっちにしてもFirefoxに慣れきってしまっているとなかなか違和感がある事は拭えません。慣れろ（自戒を込めて）
ブックマークはOSがMacであればXmarksが使えるので、他のブラウザとの使い分けもヘーキ。
別ウィンドウに開くページは常にタブで開く設定が欲しいです。Gmailとか開こうとするとイチイチ新規ウィンドウが開くのがスゴく嫌。タブブラウザの意味がない気がする。。。。