山形では初開催となる「CSS Nite in YAMAGATA, Vol.1」が、2010年1月24日（日）に行われました。隣県で行きやすいということもあり、参加してきました。雑感を。

Session 1：Webデザイナーも知っておきたいIllustratorでのデータ作成（鷹野さん）

Illustratorはバージョンが上がるごとに機能が洗練される一方、「呼び方」や「挙動」の統一が錯綜する感じで、もうちょいガンバレ感があります。

• イラストの陰影にライブペイントが便利
• シンボルを上手く使うと「使い回し」に便利
• グラフィックスタイルを効果的に使う
  パレットにドラッグで登録。option + ドラッグで上書き可能

とりあえず、「直しに強い使い方」がWebでIllustratorを使用する際の賢い使い方だと思いました。

Session 2：DreamweaverでWordPressサイトを効率よく作成する（村山さん）

WordPressのテンプレートは当然PHPのかたまりで、Dreamweaverで編集するのにはコードビューが中心となります。がしかし、機能拡張を入れることでデザインビューからの操作が可能になるとのこと。

Theme Dreamer

製品サイト：WordPress Extension for Dreamweaver

Dreamweaver用の機能拡張ですが、有料です。50＄程度ですが、DreamweaverのデザインビューでWordPressのテーマがいじれるとなると、かなり作業効率が上がりますね。これは買って損はないかも。

• CSS Nite in YAMAGATA, Vol.1：1月24日山形初開催！
• CSS Nite公式サイト

会場、終始逆光な感じで目がすごい疲れました…。会場に対する満足度って難しいですね。

かなりニッチなニーズでしょうが、HTMLから外部ファイルとして扱っているCSSを、インラインCSSに変換してしまうというチカラワザなツールです。
インラインCSSとは、スタイルシートを適用させたい要素に直接プロパティを書き込むものです。

利用シーンとしては

• HTMLメール用変換
• 携帯電話向けに変換
• ブログの記事部分のスタイリング

あたりが考えられます。

使い方

入力欄に、ダイレクトにURLか、外部CSSを含んだソースコードを直接コピペします。

「Convert」ボタンをクリックすると、すぐ下のConverted HTMLエリアに変換後のソースが生成されます。

CSSの再現性は、元ファイルの作り方にも影響するようです。

2010/1/17（日）に、『dachas×CSS Nite』と題したスペシャルイベントが行われました。

セッション1「HTML5とCSS3」益子さん

2010年は普及が広まりそうなHTML5とCSS3。私も結構CSS3は多用しています。
益子さんが言っていたのは『Progressive Enhancement』という考え方。IEだけに基準を置かず、新しい技術はサポートの良いブラウザのためにも積極利用していきましょう！とのこと。

CSS3で表現するドロップシャドウとか角丸は相当便利。今から使い慣れておいた方が良いかもしれませんね。

セッション2 「アクセスマップで考えるユーザーシナリオと”リッチ”なコンテンツ」鷹野さん

仙台では珍しいワークショップ形式のセミナー。もう何というか、地図一つのページにこんなにドラマがあるのか！というくらいの濃い内容。

いかに自分が目先のものだけしか見ていないって事を痛感しました。本当のユーザ目線って、これくらいしないと実はダメなんだなぁとつくづく思ったり。フォローアップで使ったデータをそっくりそのままもらえるのも嬉しいです。復習します。

今回はセッション毎の課金でしたが、ほとんどの人が一日通して参加されていました。前半だけで帰る人何人かいましたが、非常にもったいないですね。

• dachas
• CSS Nite公式サイト

Magic Mouseを使用する際、デフォルトだと2フィンガーの基本動作しか出来ませんが、ユーティリティを活用することにより3フィンガー・4フィンガーのクリックやタップに対応させたりと、かなり操作性の幅が広がります。

何種類かリリースされれているのでご紹介

BetterTouchTool

フリーウェア：http://blog.boastr.net/
MagicMouseの他、MacBook（Pro）のトラックパッドも拡張してくれます。キーボードとの組み合わせやカーソルの移動速度・精度を変更する機能も。個人的には超オススメです。

マジックドライバ

ベータ版：http://plentycom.jp/magicdriver/
※ベータ版（2010年3月まで使用可）。製品版では有料化になるそうです
アップル製マウス「Magic Mouse」用ドライバ。システム標準ではサポートしていない様々なジェスチャーに7種類の機能を割り当てることができます。

MagicPrefs

フリーウェア：http://vladalexa.com/apps/osx/magicprefs/
BetterTouchToolよりは設定画面が多少グラフィカルで、見やすいです。

MouseWizard

シェアウェア／2.50ドル：http://www.samuco.net/web/node/23
こちらも設定画面がグラフィカル。実際の操作がひと目でわかります。有料なのが少し考えるところ。

いずれも頻繁にアップデートを繰り返しており、より高機能・安定性を求めている感じがうかがえます。個人的にはずっと使っているBetterTouchToolがオススメです。

WordPressでソースコードを明示する際、「SyntaxHighlighter」を利用すると便利です。そんなSyntaxHighlighterの書き方、覚え書き。

基本

［sourcecode language=”css”］で始めて［/sourcecode］

で閉じる

sourcecodeは下記の形で書いてもOK

• [source language=”css”]ソースコード[/source]
• [code language=”css”]ソースコード[/code]
• [sourcecode lang=”css”]ソースコード[/sourcecode]
• [source lang=”css”]ソースコード[/source]
• [code lang=”css”]ソースコード[/code]
• [sourcecode=”css”]ソースコード[/sourcecode]
• [source=”css”]ソースコード[/source]
• [code=”css”]ソースコード[/code]

languageに指定できる言語

• C++の場合・・・”cpp”・”c”・”c++”
• C# の場合・・・”c#”・”c-sharp”・”csharp”
• CSSの場合・・・”css”
• Delphiの場合・・・”delphi”・”pascal”
• Javaの場合・・・”java”
• JavaScriptの場合・・・”js”・”jscript”・”javascript”
• PHPの場合・・・”php”
• Pythonの場合・・・”py”・”python”
• Rubyの場合・・・”rb”・”ruby”・”rails”・”ror”
• SQLの場合・・・”sql”
• VBの場合・・・”vb”・”vb.net”
• XML/HTMLの場合・・・”xml”・”html”・”xhtml”・”xslt”

参考

ソースコードをハイライト表示できるWordPressのプラグイン SyntaxHighlighter – sprouthead blog