第0回 Sublime Text 2 勉強会 で Emmet について話してきた
第0回 Sublime Text 2 勉強会で、「はじめてのEmmet with Sublime Text2」というLTをやってきた。
第0回 Sublime Text 2 勉強会について
勉強会の詳細や、togetterはこちら。
なんと岡山でサテライト会場も。
とりあえず Sublime Text Japan Users Group にはいろうよ。
紹介されたプラグインはこちらにまとめが。すばらしい。
はじめてのEmmet with Sublime Text2
資料は上述のもの。
EmmetはZenCodingの次期バージョン。いろいろ便利になる。たとえば -text-shadow5-5-5-#aaa って入力して展開すると、こんな感じに展開される。ちょっとわくわくするでしょう。
/* -text-shadow5-5-5-#aaa */ -webkit-text-shadow: 5px 5px 5px #aaa; -moz-text-shadow: 5px 5px 5px #aaa; -ms-text-shadow: 5px 5px 5px #aaa; -o-text-shadow: 5px 5px 5px #aaa; text-shadow: 5px 5px 5px #aaa;
でもSublime Text2のEmmetプラグインは、まだまだ不安定なのでいろいろ気をつけて使う必要がある。うまく展開されないことも多々ある。ま、それでも試してみると楽しいと思う。
Emmetのリポジトリなどはこちら。
元になってる ZenCoding については、ここで書いたよ！ブラウザですぐに試せるよ！
Emmetについてなにか書こうかと思ったけど、すでに素晴らしいエントリがたくさんあるので割愛。
- Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17
- CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17
- 知らない人は遅れてる？新Zen-Coding Emmet | DECONCEPTER
そもそものSublimeText2については、まずはこれを読めばオーケー。
スライドには書いたけど、Emmetプラグインのインストール方法はこんな感じ。
- Package Control を使う場合
- リポジトリを追加する( https://github.com/sergeche/emmet-sublime )。
ctrl + shift + p => Package Control: Add Repository - Package Control でインストールする。
Package Control: Install Package emmet-sublime - SublimeText2を再起動
- リポジトリを追加する( https://github.com/sergeche/emmet-sublime )。
- だめなら手動でインストール。git cloneしてPackagesディレクトリに置く。
git clone https://github.com/sergeche/emmet-sublime.git
SublimeText2でEmmetを使ってみて、いくつか注意することがあった。
まず tab での展開は外したほうがいいかも。 他の動作を上書きしてしまう。困る。
"disable_tab_abbreviations": true
Emmetを使ってHTMLを書いていると、日本語の変換を確定すると入力した文字が消える。困る。
"disable_formatted_linebreak": true
まとめると「Preferences => Settings - User」でこんな感じに書けばオーケー。
{ // tabでの展開の上書きしない for Emmet "disable_tab_abbreviations": true, // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet "disable_formatted_linebreak": true }
あとZenCodingプラグインと併用すると、動作がおかしくなるので、ZenCodingプラグインはアンインストールか無効かしましょう。
Package Control 使っていれば Package Control: Disable Package か Package Control: Remove Package で出来るはず。
Ustの録画
まとめ
やっぱりLTでライブコーディングするのはかなり忙しい。ちゃんと失敗したけど、ちゃんと準備していたのでなんとかなりました。準備大事。たぶん、なんとかなったはず。ちょっと時間をオーバーしたけど。
30人募集の勉強会に90人以上の応募があるとか、SublimeText2の人気はすごいなと。これからもいろいろな情報を交換していきたい。次回もぜひ参加したい。
あと、こもりさんが使っているパッケージの一覧が公開されてる。日本語の簡単な紹介がついててわかりやすい。一度見てみると、知らないパッケージがあったりして楽しいと思う。
- ST2: Recommended ST2 Packages for Beginners. ― Gist
- ST2: Sublime Text 2 Packages for Web Developers. ― Gist
とりあえず Sublime Text Japan Users Group にはいろうよ。大事なことなので二回言いました。
スロウハイツの神様
辻村深月の「スロウハイツの神様」を読了した。いい作品だった。面白かった。
辻村深月はデビュー作の「冷たい校舎の時は止まる」を読んだきりだった。読んだら面白いだろうと思っていたし、友達も勧めてくれていた。でも読み始めたらはまっちゃいそうで、読んでいなかった。
作中で、登場人物であるチヨダ・コーキという作家の本に対する、こんな文章があった。
「出てくる考え方とか、言葉の一つ一つとか。ガキだったからさ、俺のことどうしてこんなに知ってるんだろうって、勝手に代弁者か、救世主みたいに思ったよ。不思議だよな。あんなの、現実には起こるわけない完全なファンタジー小説なのに」
「スロウハイツの神様」を読むと、こんなふうに感じるひとはけっこういるんじゃないかな、と思った。ついつい感情移入してしまう。
もちろん僕はついつい感情移入してしまった。どこかまでは言わないけど、ところどころ、でもそれなりに多く。
この文章ほどではないかもしれないけど、登場人物が多くてそれぞれの性格は全く異なるから、いろいろな人に当てはまるポイントがあると思う。それがこの作品の面白さの一つなんだろうな、と思った。そしてこれだけ書けるってすごい。
紙の本を読んでいて、「下巻の半分を過ぎて、更に面白くなりそう」や「残り100ページ、ラストに向けてどうなるんだろう？」って感覚がけっこう好き。電子書籍だと、そういうところが分かり辛い。どっかで誰かが書いていた気がするけど、記憶に埋もれて思い出せない。
「スロウハイツの神様」は物語の構成がすごくいい。文体はオーソドックスだけど、物語の完成度が高い。いいミステリを書ける人は、頭がいい。こういうミステリ作家の書く、ミステリ以外の作品がけっこう好き。例えば恩田陸の「夜のピクニック」とか。
文章だけでも充分に面白くて、さらにラストに向けて加速して収束して、すべてがぴたっと収まる。
そして、なによりも救いがあってよかった。
ノンデザイナーズ・デザインブック
ノンデザイナーズ・デザインブックを読了した。これもけっこう前に。
デザインは好きだけど、デザインはできない。それでもちょっとくらいは知っておきたいと思って読んだ。有名な本だし。
ベースは紙のデザインだけど、普遍的な内容が多いので、いまでもそんなに色褪せない。題材がちょっと古めかしく感じるけど、大事なのは原理/原則なので、そこを意識すれば特に問題ないと思う。流行り廃りはやっぱりあるし。
この本を1回読んだからといって、いいデザインができるわけじゃないけど、デザインを理解する手助けになると思う。
エンジニアであれば、書いたコードの1行1行の意味を説明できる。たぶん。(正直なところ、何も考えずに書いてしまったり、ついついコピペしちゃうこともあるけど、ちゃんと説明できるようにしておきたいと思っております)
デザイナであれば、デザインのひとつひとつを説明できると思う。たぶん。なぜこのフォントを使っているのか、なぜこのフォントサイズなのか、なぜこの配色を使っているのか。とか。
エンジニアもデザイナも、ひとつひとつの意味を考えて書いていくと思う。そこまで至らないにしろ、そうありたいと思っている、と思う。
で、本書を読むと、デザイナのひとがどんなふうに考えていたのか、ちょっとわかる気がする。あるいは、こんなふうに考えてこのフォントを選んだのかな？と考えたりする。
たとえば映画のポスターをみて、どうしてタイトルがこんなふうに配置されているんだろうと考える。本書を読む前もちょっとは考えていたけど、本書を読んでからはデザインの基本的なルールを知った上で考える。
それが楽しい。本書を読んで、デザインの完成にいたる過程を、より具体的に想像するようになった。と思う。
個人的には、やっぱりタイポグラフィの章を読むのがいちばん楽しかった。
関係ないけど、フォント、活字がやっぱり好き。基本的にサンセリフ体が好きで、Helvetica、Futura、Optimaあたりが特に好き。組み合わせが難しいとあるけどOptimaはやっぱり美しい。
プログラミングも楽しいけど、デザインも楽しい。
![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](http://ecx.images-amazon.com/images/I/41nvddaG9BL._SL160_.jpg)
ノンデザイナーズ・デザインブック [フルカラー新装増補版]
posted with amazlet at 12.10.31
第9回 GTUG Girls Meetup 「Web Intents」に行ってきた
第9回 GTUG Girls Meetup に行ってきた。内容は Web Intents のコードラボだった。
- 第9回 GTUG Girls Meetup
- 開催日時 2012年10月17日
- テーマ 「Web Intents」
- 会場 Opera Software 日本オフィス
Fumiさんとよういちろうさんが、しっかりしたエントリを書いている。なので僕は気楽に書こうかと。
- 天使やカイザーと呼ばれて » Web IntentsのコードラボをGTUG Girls Meetup #9で行ってきました
- 天使やカイザーと呼ばれて » Web Intentsのコードラボをやります
- Fumi's Travelblog: 第9回 #gtuggirls Web Intentsのコードラボを行いました
GTUG Girlsという名前からわかるように、男子禁制の勉強会。写真撮るから遊びに行かせて！ってスタッフの人に言ってみたら、ちょうどいつも写真を撮っている方が参加しないということで、潜り込めた。
言ってみるもんだ。そんなわけで、ちゃんと写真を撮って、しっかりコードも書いてきた。
これまでに見たことのないような華やかな勉強会で、なごみタイムという時間をはじめて経験した。なごみタイムは勉強会の最初にあって、お菓子を食べながら周りのひとといろいろお話する時間。そこで打ち解けて、みんなで協力しながらコードを書いていくという流れ。いいね、これ。
しっかりなごんだあとに、小松さんのWeb Intentsの説明から勉強会が始まった。
Web Intents概要
小松さんの資料はこちら。
デモでは、YouTubeの動画をブラウザを経由してTVで表示していた。再生や停止、音量のコントロールをブラウザで行うと、TVでもそのとおりに動く。
文章で書くのはなんとも難しいんだけど、サンプルは公開されているので興味があればこちらをどうぞ！
Web Intents Codelab
続いてはよういちろうさんのWeb Intentsのコードラボ。資料はこちら。
とてもわかりやすい資料とサンプルだった。このとおりにやっていけば、Web Intentsを使ったChrome Extensionが簡単に作れた。
コードラボでは、画像を加工するアプリケーションと、画像を保存しておくアプリケーションが題材だった。
これをWeb Intentsで連携するようにしていく。お互いのアプリケーションが、以下のように連携できるようにしていく。
- 画像を加工したら、その画像を保存する
- 画像を保存したら、その画像を加工する
サンプルは一部未完成な状態になっているので、勉強会のなかでその部分のコードを書いて、アプリケーションを完成させる。
そんなに難しくないので、こちらも試してみると楽しいと思う。
まとめ
個人的な意見だけど、たぶん Web Intents は文章や説明だけを読んで理解するのはけっこう大変だと思う。でも動作が分かれば、あとはすんなり理解できると思う。
Chromeを使っていれば、下のサイトの右上に「Web Intentsでシェア」ってボタンが出てくる。
これを押すと、対応しているExtensionがインストールされていればそれが表示され、インストールされていなければ対応しているExtensionのリストが表示される。
サイトは share というactionに対応したExtensionを呼びだそうとする。Chromeは share に対応したExtensionを表示する。対応したExtensionがインストールされていなければ、対応しているExtensionのリストを表示する。
そして share に対応したExtensionがあれば、サイトはIntentを渡す。Intentにはactionとtypeとdataが入っていて、このサイトの場合は以下の情報を渡している。
Action: http://webintents.org/share
Type: text/uri-list
Data: http://events.html5j.org/conference/2012/09/
Extensionはこの情報を受け取っていろいろ処理する。たとえばDataに入っているURLをtwitterに投げたりとか。
僕ははじめてWeb Intentsのコードを見たとき、けっこう混乱した。だれが投げて、だれが受け取るか、どこに投げるコードを書いて、どこに受け取るコードを書くのか、よくわからなくなっちゃって。
そのときはまだChromeでも実装されてなかったから、仕方なかったかもしれないけど。そのときはWeb Intentsよくわからないねーで終わらせていた。それがこういう機会で勉強できてよかった。今回はちゃんと理解できた、と思う。
# いちおう、予習して行ったんですよ。あまりにわからないと恥ずかしいので(笑)
コードラボの最中、タイポしちゃって隣のいちじょうさんに、「Blob」を「Blog」って書いちゃいましたよ、と言ったら、さっき私もやった、と言われて盛り上がったりした。基本的に同じコード、同じものを作っていくので、ハッカソンと違ってみんなでやれるのがいいなと思った。置いてきぼりになるひとはいなかったし、コードラボいいね。
Operaさんのオフィスはハロウィン仕様で、こんなものも置いてあった。仮面舞踏会的コードラボ。
女性のエンジニアであれば、参加してみるといいと思う。楽しいし、エンジニアな友達もできそうだし、勉強になるし、お菓子食べれるし。
ところで、写真、楽しそうでしょう。もちろん楽しかった。
僕も機会があればまた参加したい。なかなかなさそうだけど。
PRIDE(プライド)―池袋ウエストゲートパークX
石田衣良の「PRIDE(プライド) 池袋ウエストゲートパークX」を読了した。ついに10作目。すごい。
いつも書いてるけど、疾走感のある文章が好き、だけどやっぱりもうちょっと長めの、込み入った話も読みたい。とはいえ、今回の物語も楽しかった。
背表紙に「IWGPシリーズ第一期完結」とあったので、しばらく続きはでないのかな。ちょっと残念。
PRIDE(プライド) 池袋ウエストゲートパークX (文春文庫)
posted with amazlet at 12.10.08
レスポンシブ・ウェブデザイン標準ガイド
こもりまさあきの「レスポンシブ・ウェブデザイン標準ガイド」を読了した。けっこう前に、流し読みだけど。
レスポンシブ・ウェブデザインに関する情報は、最近とても増えていて、何が正しいのかよくわからない。もちろん絶対的に正しい情報があるわけじゃないし、時間が経てば正しい情報も変わるけど。
本書では、レスポンシブ・ウェブデザインに関する基本的な考え方から、実装の流れ、具体的なテクニックまでが書かれていてわかりやすかった。
カラーのページが多かったので、カラーページではソースコードがシンタックスハイライトされていると嬉しかったかも。これは吉川さんの jQuery Mobileパーフェクトガイド を読んで気付いたことだけど。
僕はエンジニアなので、ゼロからレスポンシブなサイトを作ることはないと思うけど、やっぱりある程度は仕組みを知っておきたかった。それにレスポンシブなサイトのソースを読んで、ある程度は理解できるようになりたかった。
いくつかポイントを抑えるだけで、HTMLやCSSがだいぶ読みやすくなると思う。
自分でなにか作るなら Initializr などを使う。フレームワークを使うことでコーディングは楽になるけど、そもそも基本的な考え方や原理は知っておくと、できあがりがけっこう変わってくると思う。たぶん。
本書ではそういったところを知ることができてよかった。
あたりまえだけど、レスポンシブ・ウェブデザインはひとつの手法で銀の弾丸ではない。
開発リソースが潤沢にあれば、PC向け、タブレット向け、スマホ向けって、分けて作ったほうがより最適なサイトになるだろうし。クライアント(ブラウザ)側で頑張ることが最適とも限らないし。
あと、自分では重要だと思っているんだけど、そのサイトがWebサイト的か、Webアプリケーション的かで、いろいろ変わってくると思う。blogなんかはWebサイト的だと思うし、GMailやGoogle MapsはWebアプリケーション的だと思う。
Webサイトであればレスポンシブがいいけど、Webアプリケーションの場合はそうとは限らないと思う。
とはいえ、レスポンシブ・ウェブデザインは多くの場面で効果的なアプローチだと思っているので、こうやってちょっとずつ勉強しておきたい。置いていかれないくらいに。
Facebookページにいろいろ情報が流れてくるので、こちらもチェックしておくといいかも。
レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
posted with amazlet at 12.10.08
人間失格と津軽
太宰治の「人間失格」と「津軽」を読了した。「人間失格」を読むのは2、3回目だと思う。「津軽」ははじめて読んだ。青森の風景描写や歴史についての部分はだいぶ読み飛ばしてしまったけど。
9月に青森へ旅行に行った。写真は太宰治の生家、いまは太宰治記念館「斜陽館」として見学できる。せっかく青森に行くのだからと思って、太宰治を読み返した。
全体を通して、破滅的で堕落してく人間の弱さが描かれている。最初と最後に、印象的な文章がある。
恥の多い生涯を送って来ました。
いまは自分には、幸福も不幸もありません。
ただ、一さいは過ぎて行きます。
なんだか感想っぽいものがあまり浮かばない。だけど、太宰治の作品はそんなに嫌いじゃないかもしれない、と思うようになってきた。
「津軽」は少しまともな太宰治を垣間見れる。落ち着いてちょっと楽しげな、平和な文章がとても新鮮だった。こういう一面もあるからこそ、ほんとうに絶望的に書けるのかもしれない、と思った。
太宰治の作品は、読んでも読んでも忘れてしまうので、また読もう。前もそんなこと書いてた。なんでだろうな。
