tag:blogger.com,1999:blog-22575575053597179692024-03-05T23:28:28.687+09:00じまぐてっくじまぐ<a href="https://twitter.com/nakajmg">@nakajmg</a>による技術メモUnknownnoreply@blogger.comBlogger29125tag:blogger.com,1999:blog-2257557505359717969.post-67797280042765904042013-11-08T23:45:00.002+09:002013-11-08T23:45:26.429+09:00ブログをGithub Pagesに移行したナウいことしたいと思ったのでブログをGithub Pagesに移行した。<br />
<br />
<a href="http://nakajmg.github.io/">http://nakajmg.github.io/</a><br><br />
<br />
ページはJekyllでジェネってる。カスタマイズしようとするとちょっと微妙なところもあるけどちょっとずつ気に入ってきた。<br />
<br />
書くのに集中できるようにGruntで色々自動化したりCSSをSassで書いたり。<br />
やっぱ何か目的があるとすんなり周辺の技術を使ってみようってなる。<br />
<br />
Github Pagesいいんだけど、どうもGoogleの日本語検索だと引っかからない気がする。<br />
まぁいっか。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-11180590593777557882013-10-02T15:36:00.000+09:002013-10-02T15:36:29.582+09:00Test The Web Forward Meetupに参加しました<style>
body{
line-height:150%;
}
</style><br />
<a href="http://atnd.org/events/43412">Test the Web Forward Meetup (仮), Tokyo #1| ATND</a><br />
<hr><br><br />
Test The Web Forwardについてはこの記事の解説を。<br><br />
・<a href="http://html5experts.jp/myakura/2704/" target="_blank">テストを書いてWebを前進させよう!「Test the Web Forward Meetup (仮), Tokyo #1」| HTML5 Experts.jp</a><br />
<br><br />
TestTWF Meetupは「html5jテスト部」の活動で自分も部員として参加しました。<br />
<br><br />
今回は<a href="http://www.atmarkit.co.jp/ait/articles/1306/25/news008.html">6月に開催されたTest The Web Forward Tokyoに参加してた</a>こともあってリファレンステストの書き方について説明させてもらいました。<br />
<br />
<iframe src="http://slid.es/nakajmg/reftest/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
<br />
Web標準の仕様の実装に関するテストを書くという素晴らしい取り組みなんですが,どの仕様にたいしてテストが足りないのかがわかりにくいというのが難点で,そこをクリアできればもっとみんなでいっぱい書ける気がします。<br />
英語力もそこまで必要とされないですし。<br />
<br />
世の中にはテストを書くのが大好きな人がいるので,そういった人にリーチしていくためにも継続的な活動が必要になると思います。<br />
<br />
Webの未来は自分の未来だと思うので協力していきたいですね。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-52498113363908614462013-10-02T15:21:00.000+09:002013-10-02T15:21:20.758+09:00HTML5 Experts.jpのコントリビューターになりました<style>
body{
line-height:150%;
}
</style><br />
<ul><li> <a href="http://html5experts.jp/" target="_blank">HTML5 Experts.jp</a><br />
<li> <a href="http://codezine.jp/article/detail/7262" target="_blank">NTTコム、日本初のHTML5技術専門サイト「HTML5 Experts.jp」を開設</a><br />
</ul><br>
<p><a href="http://html5experts.jp/author/" target="_blank">そうそうたる面子で構成されてるエキスパートな集団</a>に「コントリビューター」というポジションで末席に加わらせていただきました。<br>
</p><p>記事も一本公開してわりといい感じの評価をいただけました。
<br>
<br>
・<a href="http://html5experts.jp/nakajmg/" target="_blank">HTML5Experts.jp > 中島 直博</a><br>
・<a href="http://html5experts.jp/nakajmg/2502/" target="_blank">よくある3つのデザインから考える、マークアップの最適解</a>
<br>
<br>
エキスパートにはまだまだかなり程遠い自分ですが,頂いたチャンスを無駄にしないように頑張ろうと思います。
</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-56670584907408735512013-09-11T10:08:00.000+09:002013-09-11T10:09:56.959+09:00World Wide Webの生みの親とランチした話<span style="font-size:small;">少し前のことだけど誰もブログに書かないので忘れないうちに書いておく。</span><br />
<br />
あの<a href="http://ja.wikipedia.org/wiki/%E3%83%86%E3%82%A3%E3%83%A0%E3%83%BB%E3%83%90%E3%83%BC%E3%83%8A%E3%83%BC%E3%82%BA%EF%BC%9D%E3%83%AA%E3%83%BC" target="_blank">Sir ティム・バーナーズ=リー</a>と一緒にランチをした。<br />
<br />
6月に<a href="http://internet.watch.impress.co.jp/docs/event/20130613_603602.html" target="_blank">Interopで講演</a>するために来日してたSir ティム・バーナーズ=リーが、日本のWebコミュニティのメンバーと話してみたいってことでhtml5jとのランチミーティングが実現。<br />
<br />
みんなでSirティムに自己紹介したんだけど、自分は英語が得意じゃないからGoogle翻訳使って「Webのおかげで超楽しいです。感謝してます」とだけ伝えといた。<br />
<br />
この日HTMLなTシャツを着ていったらW3CのMikeがイジってくれてSirティムも笑ってくれた。<br />
<br />
こんなすごい人と一緒の時間をすごせて幸せでした。<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8SJ-tFar2CBJnddyOSgnTSH6Mk2mzuEgF42Ai74XWX5evMyJuc3FaYB8l3LAcsDaI8tmuwshyphenhyphenL8HXwr2zXX1QjVdLvsnzaNlsl4C1W6Owm_KaMBH5duUzQ3FPTJ13z9f3gPXVtc47e0/s1600/IMG_0916.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8SJ-tFar2CBJnddyOSgnTSH6Mk2mzuEgF42Ai74XWX5evMyJuc3FaYB8l3LAcsDaI8tmuwshyphenhyphenL8HXwr2zXX1QjVdLvsnzaNlsl4C1W6Owm_KaMBH5duUzQ3FPTJ13z9f3gPXVtc47e0/s640/IMG_0916.jpg" /></a></div><br />
※写真はW3Cの許可を取って掲載しています。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-41334096408568123052013-05-01T00:25:00.001+09:002013-05-01T00:38:18.664+09:00第38回HTML5とか勉強会で司会をしてきた<style>
blockquote{
color:#666666;
margin:0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
</style>
<br>
<blockquote>
<p><a href="https://html5j.cloudfoundry.com/event/sd38" target="_blank">第38会HTML5とか勉強会 「Webアプリxテスト最新事情」</a></p>
</blockquote>
<br>
<p>前回のとか勉強会で<a href="http://gihyo.jp/news/report/2013/04/0301" target="_blank">登壇者デビュー</a>をしましたが今回はなんと司会をやらせて頂きました。<br></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXE5Hbcvd4awXDZEPkps2-4Y2l4X5VlTneat4KInAbxadCOXTVSnlJeJ_obKk2SDuwSoXf53XoAZihQhKx3d5T6PP4M2U6JyD6YNC69_fEFcTU06QUfiBiupHySHfgjkLLLj9VOvGGk0/s1600/IMG_9740.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXE5Hbcvd4awXDZEPkps2-4Y2l4X5VlTneat4KInAbxadCOXTVSnlJeJ_obKk2SDuwSoXf53XoAZihQhKx3d5T6PP4M2U6JyD6YNC69_fEFcTU06QUfiBiupHySHfgjkLLLj9VOvGGk0/s320/IMG_9740.JPG" /></a>
<h3 id="30">決まったのは30分前</h3>
<p>「司会やってね」と言われたのが勉強会開始の30分前で、すごい無茶ぶり(と言う名の愛のムチ)だったんですが、<br>
なんかおもしろそうと思ってやってみました。<br><br>
開始前の説明とかの資料はhtml5jが誇るデキる男<a href="https://twitter.com/yoshikawa_t" target="_blank">@yoshikawa_t</a>がバッチリ用意してくれていたので助かりました。<br></p>
<h3>参加人数がすごかった</h3>
<p>今回は参加してくれた方が予想より多く、急遽隣の部屋にサテライト会場を作るほどの大盛況でした。<br>
当日の盛り上がりは<a href="http://togetter.com/li/495509" target="_blank">togetterのまとめ</a>で。<br><br>
講演資料を今回登壇してくれた<a href="https://twitter.com/teppeis" target="_blannk">@teppeisさん</a>がまとめてくれています。<br></p><br>
<blockquote>
<p><a href="http://teppeis.hatenablog.com/entry/2013/04/30/html5-study" target="_blank">第38回 HTML5とか勉強会でテストについて話しました。</a></p>
</blockquote>
<h3 id="-2">内容もすごかった</h3>
<p>「テスト」という超ガチガチで硬派な内容でしたが、わかりやすい講演内容のおかげでテストに少し近づけたと思います。<br>
「テスト駆動開発」というワード自体は何度も目にしてましたがコードを見ながら解説を聞けたことで理解が結構進みました。<br>
<br>
講演の中で「最初は小さな個人プロジェクトとかから書き始めるのがいいかも」とあったので、少しずつテストを書いていきたいと思います。</p>
<h3 id="-3">座談会</h3>
<p>講演者の方々たちによるテストについての座談会形式のディスカッションがありました。<br>
モデレート力がすごくて話を振りつつ難しそうな単語について補足をしていく姿にシビレました。<br></p>
<h3 id="-4">懇親会</h3>
<p>Googleさんから無料で懇親会の食事とビールなどを振舞って頂きました。いつもありがとうございます。<br>
司会をやったおかげかいつもより多くの人に話しかけてもらえて楽しかったです。<br>
<br></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2K7LeA4t2Jr8FLgQ-bzx9njaQfv0b4MH_dBx4nFEja8Xzgz1ljmrxjIp8Pbd6fP8VXmSvuLMNWxhkdnxqYV0RHbmWPsQrTZznYNnRnHSH7PQL-pKa2muVhUhmjTZ9OGLPySLVn-wMz5c/s1600/34543170ae9311e29bdc22000a9f3c8f_7.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2K7LeA4t2Jr8FLgQ-bzx9njaQfv0b4MH_dBx4nFEja8Xzgz1ljmrxjIp8Pbd6fP8VXmSvuLMNWxhkdnxqYV0RHbmWPsQrTZznYNnRnHSH7PQL-pKa2muVhUhmjTZ9OGLPySLVn-wMz5c/s320/34543170ae9311e29bdc22000a9f3c8f_7.jpg" /></a>
<p>懇親会の片付けしているときに転職祝いとしてビールについてたご飯をいただきました。<br>
引越しして炊飯器を買い忘れていたのでとても助かりましたありがとうございます。<br></p>
<h3 id="-5">おわりに</h3>
<p>拙い司会もありましたが講演者の方々のおかげで素晴らしい勉強会でした。<br>
座談会たのしかったです。<br>
<br></p>
<h3 id="-6">ダメ出し</h3>
<p>スタッフ打ち上げの席で今回の司会についてご意見をいただきましたので最後に紹介したいと思います。</p>
<ul>
<li>落ち着きすぎ</li>
<li>淡々としすぎ</li>
<li>テンションが低い</li>
</ul>
<p>(´・ω・`)ありがとうございました</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-73523922656611811262013-04-30T23:02:00.001+09:002013-04-30T23:05:31.449+09:00Chocolateyを使えばWindowsの開発環境構築の手間から解放されるかもしれない<style>
pre , code, kbd, samp {
color: #000;
font-family: monospace;
font-size: 0.88em;
border-radius:3px;
background-color: #F8F8F8;
border: 1px solid #CCC;
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px 12px;}
pre code { border: 0px !important; padding: 0;}
code { padding: 0 3px 0 3px; }
</style>
<p>aptとかbrewとかportsとか便利なパッケージ管理ソフトが色々あります。<br>
開発をMacでやるようになってからというもの、Windowsの環境構築がめんどくさすぎて開発に使おうと思うことはなくなりました。<br>
<br>
ですがWindowsにもいい感じのパッケージ管理ツールが来たと風の噂に聞いて試してみました。<br>
<br>
ツールの名前はChocolatey。なんともSweetでCuteな名前ですね。</p>
<h3>リンク</h3>
<ul>
<li><a href="http://chocolatey.org/" target="_blank">公式</a></li>
<li><a href="https://github.com/chocolatey/chocolatey/wiki" target="_blank">ドキュメント</a></li>
</ul>
<h3 id="-2">動作環境</h3>
<ul>
<li>Windows XP/Vista/7/2003/2008</li>
<li>.Net Framework 4.0</li>
<li>PowerShell 2.0 >=</li>
</ul>
<h3 id="-3">インストール</h3>
<p>コマンドプロンプトから下記コマンドを実行</p>
<pre><code>@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('http://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
</code></pre>
<h3 id="powershell">ここからはPowerShellで</h3>
<h3 id="-4">パッケージのインストール、アンインストール</h3>
<h3 id="-5">インストール</h3>
<p><code>cinst packageName</code></p>
<p>用意されているパッケージは<a href="http://chocolatey.org/packages" target="_blank">gallery</a>で確認できる</p>
<h3 id="-6">アンインストール</h3>
<p><code>cuninst packageName</code></p>
<h3 id="update">パッケージのupdate</h3>
<p><code>cup packageName</code></p>
<h3 id="-7">インストールされているパッケージの確認</h3>
<p><code>cver all -localonly</code></p>
<h3 id="-8">感想</h3>
<p>とにかく簡単。<code>cinst ruby</code>の10文字でrubyの実行環境ができました。<br>
<br>
インストールできるパッケージ数も860以上、GUIのツールまで入れられるってんだから文句ないね。
<br>
ここまで敷居が下げられるとWindowsでの開発にも前向きになれる気がします。<br></p>
<h3 id="powershell-2">PowerShellもまぁまぁいい</h3>
<p>コマンドプロンプトよりはいい</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-25336575582297212982013-04-18T22:55:00.000+09:002013-04-18T22:55:24.229+09:00株式会社エクスクウェイドを退職しました<blockquote class="twitter-tweet" lang="ja"><p>ニートなうヾ(@⌒ー⌒@)ノ</p>— じまぐさん (@nakajmg) <a href="https://twitter.com/nakajmg/status/322666633065816065">2013年4月12日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>株式会社エクスクウェイドを退職しました。正確には20日までですが、4月12日が最終出社日でした。
チーフフロントエンジニアとして、バイトの期間を入れると約1年ほどエクスクウェイドで仕事をしていました。
</p>
<br>
<p>業務的にはソーシャルアプリの開発・運用の業務に携わってきました。<br>
もともと社内にスマホ向けにHTMLやCSS、JSを書ける人がいなかったらしく、高校の同級生だった奴(副社長)に誘われてのこのことバイトとして働き始めました。
</p>
<br>
<p>
初めは慣れないことばっかりで、とにかく調べまくってなんとか形にしながらこなしてました。<br>上も下もいなくて誰にも聞くこともできず、自分のやり方が合ってるのかどうか、間違ってないかとひたすら不安でした。<br>でもそんな環境でやってたからこそ、色々な知識やテクニックを身につけることができたのかなとも思います。
</p>
<br>
<p>
バイトを始めたとき自分は大学院生として研究をしてたわけなんですが、実際の業務での開発はとても刺激的で、だんだんと研究からバイト主体にシフトしていきました。<br>バイトを初めて2ヶ月たった辺りで大学院を中退しました。(修士2年でした)
</p>
<br>
<p>
大学院を辞めてこの会社にコミットしていきたい、と思ったきっかけは<a href="https://twitter.com/polidog" target="_blank">@polidog</a>との出会いでした。<br>彼は同い年で、CTOで、技術に貪欲で会社の中では誰よりも働いてました。<br>彼と働きたい、彼となら何かおもしろいことができそうだなと感じさせるようなオーラを持ってるイケメン(クズ)でした。
</p>
<br>
<p>
<a href="http://www.polidog.jp/2013/01/12/%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%A8%E3%82%AF%E3%82%B9%E3%82%AF%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%89%E3%82%92%E9%80%80%E8%81%B7%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82/" target="_blank">一足先に去ってしまった彼</a>と一緒に働けた期間はそんなに長くはありませんでしたが、自分を上に前にと引っ張ってくれたように感じます。<br>人生の転機になるきっかけをくれて感謝してます。
</p>
<br>
<p>
退職の理由は色々とありますが、もっといろんな技術に触れたいとか成長したいっていう気持ちが強くあって飛び出しちゃいました。
</p>
<br>
<p>
1年間ありがとうございました。<br>
とにかく自由に働ける環境で、まるで大学の研究室にいるように伸び伸びとやらせてもらえて楽しかったです。<br>定時の2時間前に勉強会に行かせてもらえる懐の深い会社でとても助かっていました。
</p>
<br>
<p>
今週はほんの束の間のお休みをおもいっきり満喫しています。<br>来週からまた勤め人として頑張りますのでよろしくお願いします。<br>
<br>
エンジニアとしてはまだまだひよっ子なのでもっともっと頑張っていこうと思います。<br>
</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-91927097124687365712013-04-11T23:45:00.000+09:002013-04-11T23:45:17.412+09:00デザイニアンに参加してきた<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOh2nqBWXUDt22hEL0En0ViMYAW2AQmPrHZAauvJe9UwIEZQf6S6p7bHantHI9Y3q5Fq295Sxr4oQHZLrX5_Vhd_D-ablMjWXIxIoz1L1ajxHLqfXVAmyXBEONahQrdqOCm4SeuBMatxw/s1600/IMG_2217.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOh2nqBWXUDt22hEL0En0ViMYAW2AQmPrHZAauvJe9UwIEZQf6S6p7bHantHI9Y3q5Fq295Sxr4oQHZLrX5_Vhd_D-ablMjWXIxIoz1L1ajxHLqfXVAmyXBEONahQrdqOCm4SeuBMatxw/s320/IMG_2217.JPG" /></a>
<p><a href="http://designian.html5j.org/">DESIGNIAN's</a></p>
<p>会場はTwitter Japanさん! 初潜入ヽ(=´▽`=)ノ<br>
当日はTwitter Japanさんからのご好意でピザとビールも振舞われました。
ごちそうさまでした。</p>
<br>
<p>デザイナー秋葉さんとエンジニア白石さんの二人によるトークセッション的な今回のイベント</p><br>
<p>「デザイナーがデベロッパーと一緒につくるってどうなんだ!?」というテーマで、Webデザイナーとエンジニアとの協業についてのお話を中心とした内容でした。
<br>自分もお仕事でデザイナーさんとやりとりしながら作業することが多いので、デザイナーさん側の感覚を知るいい機会でした。</p>
<br>
<p>参加者割合はデザイナー:エンジニアで6:4?くらいだった感じ(ディレクターさんもいた)</p>
<p>以下適当なメモとちょっとした感想をつらつらと。ちなみに自分はエンジニア側です。</p>
<h3>デザイナーがエンジニアの画面を覗いた時に「なにこれ」って思うやつ</h3>
<ul>
<li>黒い画面(ターミナル)</li>
<li>JavaScript</li>
<li>EclipseとかのIDE</li>
<li>Git </li>
</ul>
<p>安定の黒い画面。</p>
<p>最近はGitで運用してるプロジェクトに関わる機会が増えてるデザイナーさんが多いのかな?HTMLとかGitで管理できるようになればすごく楽できるようになると思います。</p>
<p>秋葉さんの「FTPがいいなぁ」に会場笑い。</p>
<h3 id="-2">デザインの範囲</h3>
<ul>
<li>見た目だけじゃない、機能もデザイン</li>
<li>使う人のことを考えてどうするかもデザイン</li>
<li>「現在地から探す」とか最近のアプリにはあるけどそこらへんもデザインだよね</li>
</ul>
<p>UIだけじゃなくUXもデザインなんだなーとしみじみ。</p>
<h3 id="-3">ブラウザを上手に使ったデザインをどう作れるか</h3>
<ul>
<li>カンプが「動きと遷移」を想定したデザインになってるか</li>
<li>意味のないカンプになっちゃうかもしれない</li>
<li>納期間際で修正が発生したらクオリティチェックも曖昧になりがち</li>
<li>ボタンの状態変化(押せない状況)とかそういうところに気が回らない部分があるかもしれない</li>
</ul>
<p>デザイナーさん視点のお話。
上にあるような「機能もデザイン」な視点が必要なのかなーと思った。</p>
<h3 id="-4">ワイヤーフレーム</h3>
<ul>
<li>ワイヤーフレームには都合のいい状況しか書いてない</li>
<li>イレギュラーなことが起こった時のことも考えよう</li>
<li>エンタープライズ系だとエラーの洗い出しとかする</li>
</ul>
<p>Web系は都度改善していくパターンが多いイメージ</p>
<h3 id="-5">エラー画面どうしてる?</h3>
<ul>
<li>エラー画面はつなぎのページ</li>
<li>飽きさせないようにデザインするのも大事</li>
</ul>
<h3 id="ui">横スライド系UIのデザイン</h3>
<ul>
<li>jQueryのプラグインとかでできるやつ</li>
<li>仕組みを理解しておくとデザインを起こすときに無理のないマークアップが実現できるよね</li>
</ul>
<h3 id="-6">エンジニアが作ってからデザイン</h3>
<ul>
<li>その画面に必要な要素をエンジニアが全部用意しておく</li>
<li>それからデザイナーさんに綺麗にしてもらうといい感じにいく</li>
</ul>
<p>マークアップにも同じ事が言えそうな。</p>
<h3 id="-7">エンジニアとデザイナーが仲良くなるのが一番</h3>
<p>うん。一番。</p>
<h3 id="-8">エンジニアと険悪になったことある?</h3>
<p>会場のデザイナーさんへのアンケートで数人が挙手</p>
<ul>
<li>デザインの工数が理解されていなくて無茶な発注をされることがあってムッとしたことはある</li>
</ul>
<p>確かにどのくらいの工数がかかるかあんまりわかってないかも。。</p>
<br>
<ul>
<li>エンジニアがコード書いてるときに話しかけたらイラつかれた</li>
</ul>
<p>これに対して会場のエンジニアさんは「エンジニアが集中するには人によって数時間かかることもあるから、メッセージを飛ばして少し間を開けて返事をまつとかすると上手くいくかも」と助言。</p>
<p>最後に飛び出した「波括弧が終わるまでは喋りかけないほうがいいかも」という発言には思わず頷いてしまった(<em>´艸`</em>)</p>
<br>
<p>デザイニアン、おもしろかったです。</p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU9wIwYIKzZE_viCGRkukrwfS6i_Tk-s9FH1viTQ0VaooEpka6kAvouhrbQTL-0ldEwM2vCL-R_D4YRfNd33krrbMS9dfMk5zS0plvp_rvzSS2FN0tHhtsypNFVUe1zAZK9xnb4xtUiI/s1600/IMG_2205.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU9wIwYIKzZE_viCGRkukrwfS6i_Tk-s9FH1viTQ0VaooEpka6kAvouhrbQTL-0ldEwM2vCL-R_D4YRfNd33krrbMS9dfMk5zS0plvp_rvzSS2FN0tHhtsypNFVUe1zAZK9xnb4xtUiI/s320/IMG_2205.JPG" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27W-ISzVxQ81VAuWCKmmVOQf8Wr3SJXZUVpewCbJGdEblwETFKfbolQ3NiVg02tg6l0ljR-M3y4s7N9l2bAodoKXL1qSVHUaGK_Mcj7UctztSYDk-LLUvxIuer51ErJuQfNhj0Zxcezk/s1600/IMG_2207.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27W-ISzVxQ81VAuWCKmmVOQf8Wr3SJXZUVpewCbJGdEblwETFKfbolQ3NiVg02tg6l0ljR-M3y4s7N9l2bAodoKXL1qSVHUaGK_Mcj7UctztSYDk-LLUvxIuer51ErJuQfNhj0Zxcezk/s320/IMG_2207.JPG" /></a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-57255467661515862612013-03-22T00:45:00.001+09:002013-03-22T12:08:59.697+09:00第37回「HTML5とか勉強会」でSafariの話をしてきた<h3><a href="http://html5j.komasshu.info/al37th.html">http://html5j.komasshu.info/al37th.html</a></h3><br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihFH-n4HoaDeU17FBLHeqMVJF3OlwG2c4oQfJV0JONv8rKFmmhpSBBvIKlLSeohAtzhpTojp6LDKHVTnG8Pm2Vnx9Z9N84WTNbVBXMPVvv_m7Gjpgtsq-ee3TZHWqrMTY-j581mo3WjN0/s1600/IMG_2120.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihFH-n4HoaDeU17FBLHeqMVJF3OlwG2c4oQfJV0JONv8rKFmmhpSBBvIKlLSeohAtzhpTojp6LDKHVTnG8Pm2Vnx9Z9N84WTNbVBXMPVvv_m7Gjpgtsq-ee3TZHWqrMTY-j581mo3WjN0/s320/IMG_2120.JPG" /></a>
<p>今回のテーマは「ブラウザでのデバッグ」ということでChrome,Safari,Firefox,IE10,Edge Inspectの講演がありました。</p>
<br>
<p>自分はその中のSafariでのデバッグについて講演させてもらいました。</p>
<br><br>
<iframe src="http://www.slideshare.net/slideshow/embed_code/17451632" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/html5j/debug-in-safari-17451632" title="Debug in safari" target="_blank">Debug in safari</a> </strong> from <strong><a href="http://www.slideshare.net/html5j" target="_blank">html5j</a></strong> </div>
<br><br>
<p style="margin-top:11px;">講演では基本的な使い方,Chromeのdevtoolsとの違い,リモートデバッグ,隠しデバッグメニューの話をしました。</p>
<p style="margin-top:11px;">隠しデバッグメニューを教えてくれた<a href="https://twitter.com/yomotsu" target="blank">@yomotsu</a>さんありがとうございました。
<p style="margin-top:11px;">勉強会での発表は初めてで,講演が始まる直前までガッチガチになってて,
始まってからはとにかく伝えることに集中してなんとかこなして,終わってからは話した内容全部忘れててなんかスッキリしました。</p>
<br>
<p style="margin-top:11px;">今回講演が始まる前には色んな人に励ましてもらい,終わったあとはなんか褒めてもらえました。</p>
<p style="margin-top:11px;">ほんとにうれしかったです。
<br>
<p style="margin-top:11px;">勉強会参加者の皆様,会場を提供してくれたNTT-ATさん,登壇者の皆様ありがとうございました。</p>
<br>
<p style="margin-top:11px;">そしてこんな機会をくれたhtml5jとスタッフのみなさん,これからもよろしくお願いします。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-13501937422488412032013-03-16T02:47:00.001+09:002013-03-18T16:21:58.695+09:00CreateJS勉強会 (第2回)に参加してきた<p>今熱いと(自分の中で)話題になってるCreateJSの勉強会があったので参加してきました。</p>
<hr />
<p><a href="http://atnd.org/events/37193">http://atnd.org/events/37193</a></p>
<h3>発表一覧</h3>
<ol>
<li>CreateJSで作るWindows8アプリ
<strong>正岡幹雄さん</strong> </li>
<li>Toolkit周りについて
<strong>chitose-macotoさん</strong></li>
<li>TweenJS for Everithing
<strong>Akihiro Oyamadaさん</strong></li>
<li>効率的なCreateJSコンテンツ開発
<strong>池田泰延さん</strong></li>
<li>外部ファイルの読込みとサウンドの再生
<strong>野中文雄さん</strong></li>
</ol>
<p>以下簡単な内容と感想を</p>
<h3 id="createjswindowd8">CreateJSで作るWindowd8アプリ</h3>
<p>CreateJSで作ったcanvasアニメーションをWindows8アプリに移植する過程を紹介してくれました。</p>
<p>Windows8への移植はほぼコピペで済むくらい簡単にやっていました。
<p>動きもばっちりそのままって感じで「Flashの知識だけでもいけるぜ!」な勢いでした。</p>
<h3 id="toolkit">Toolkit周りについて</h3>
<p>CreateJS便利だけどめんどくさいとことか痒いとこに手が届かない的なのがあるよね!→こんなの作って使ってます!
<p>てな感じでtoolkit supporterというツールの紹介がありました。</p>
<p>toolkit supporterはCreateJSの補助ツールで、ASからJSへの変換、JSの型付けなどなど、CreateJSでのコンテンツ作成がかなり捗りそうなツールでした。
<p><a href="https://code.google.com/p/toolkit-supporter/downloads/list">https://code.google.com/p/toolkit-supporter/downloads/list</a>
(MITライセンス)</p>
<p>現場でもばりばり使ってるというガチツールっぽいです。</p>
<h3 id="tweenjs-for-everithing">TweenJS for Everithing</h3>
<p>アニメーションなど動きをつけるのがTweenJSの役目で、アニメーションはメソッドのチェーンな感じで直感的に書けるそうです。
<p>TweenJSがやるのはオブジェクトのプロパティの値を変えるだけで、動かすのはEaselJSのお仕事とのこと。</p>
<p>TweenJSはEaselJSに依存関係があるので、TweenJSの機能だけを使いたい時でもEaselJSを読み込んでおく必要があるそうです。
<p>TweenJSだけ使いたいのに、、、な人はTweenJSに似たtween.jsを使ってみたらいいかもとのこと。(書き方も割りと似てる</p>
<p>TweenJSはpaper.jsやthree.jsと組み合わせて使うこともできるので、TweenJSを覚えておけば他のライブラリでも応用できるそうです。</p>
<p>「APIも少なくて覚えやすいし、ドキュメントもばっちりそろってるよ」と言ってたので使って見ようと思います。</p>
<h3 id="createjs">効率的なCreateJSコンテンツ開発</h3>
<p>TypeScriptとHaxeのおはなし。
TypeScriptは型チェックがちゃんとしてたりアロー関数式なんていう便利なものがあったりと結構惹かれました。</p>
<p>TypeScriptでCreateJSを使うときはCreateJSのサイトにあるTypeScript用の定義ファイルをダウンロードしてきて登録する必要があるそうです。</p>
<p>Haxeはそんなに興味がなかったせいで内容ほとんど覚えてないですごめんあさい。</p>
<h3 id="-2">外部ファイルの読込みとサウンドの再生</h3>
<p>PreloadJSとSoundJSのおはなし。
<p>バージョンがあがってクラス名が変わってインスタンスの作り方が変わった。
<p>イベントの名前もイベントの登録の仕方も変わってて前のバージョンとだいぶ変わったそうです。
<p>SoundJSはバージョンがあがって、停止とかの操作がクラスの静的メソッドじゃなくてインスタンスのメソッドに変わりました。</p>
<p>前の仕様だとインスタンスへの参照を持ち続けてそれを開放する手段がないのはいかがなものか、ってことで変更してくれたみたいです。</p>
<p>PreloadJSとSoundJSは自分もちょいちょいさわってみましたがかなり便利で使えそうだと感じました。
バージョン上がればもっと流行るんじゃないかなと思います。</p>
<hr />
<p>もっと注目されていいライブラリだと思うのでこれからも追いかけていこうと思います。</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-39582760123920627392013-03-11T00:44:00.002+09:002013-03-11T11:49:51.877+09:00PreloadJS x SoundJSの基本的な使い方 <p>version = preloadjs:0.3.0 , soundjs:0.4.0</p><br>
<section>
<p>
PreloadJSで読み込んだ音楽ファイルをSoundJSに渡して再生・停止を行うための簡単な説明です。<br>
PreloadJSとSoundJSはどちらもCreateJSのライブラリの一つです。簡単に連携がとれるので使い方を覚えておけばかなり強力な味方になってくれる予感がします。
</p><br>
<p> PreloadJSの基本的な使い方は<a href="http://nakajmgtech.blogspot.jp/2013/03/preloadjs.html" target="_blank">前のエントリを参照</a></p>
<br>
<p>SoundJSのドキュメント:<a href="http://www.createjs.com/Docs/SoundJS/modules/SoundJS.html" target="_blank">http://www.createjs.com/Docs/SoundJS/modules/SoundJS.html</a></p>
<h4>使用準備</h4>
<pre class="brush:[html]">
<script src="./preloadjs-0.3.0.min.js"></script>
<script src="./psoundjs-0.4.0.min.js"></script>
</pre>
<h4>installPlugin</h4>
<p>
preloadjsのインスタンスにsoundjsのクラスを渡してあげます。
</p>
<pre class="brush:[javascript]">
var queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
</pre>
<p>その後ファイルをqueueに登録して、fileloadイベントでsoundjsのインスタンスを作るfunctionに渡してあげます。</p>
<pre class="brush:[javascript]">
var manifest = [
{"src":"./bgm.mp3","id":"sound1"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(createjs.LoadQueue.SOUND === type){
startSound(item.id);
}
}
</pre>
<h4>createjs.Sound.createInstance</h4>
<pre class="brush:[javascript]">
function startSound(soundid){
var instance = createjs.Sound.createInstance(soundid); // SoundJSのインスタンスを再生(idを指定)
instance.setVolume(0.1); // 再生時の音量調整
function doPlay(){
instance.play(); // 再生
}
function doStop(){
instance.stop(); // 停止
}
document.getElementById('play').addEventListener('click',doPlay); // playボタンにdoPlayを割り当てる
document.getElementById('stop').addEventListener('click',doStop); // stopボタンにdoStopを割り当てる
}
</pre>
<p>HTMLに再生と停止のイベントを登録する2つのボタンを用意します</p>
<pre class="brush:[javascript]">
<input type="button" id="play" value="play" style="opacity:0.5">
<input type="button" id="stop" value="stop" style="opacity:0.5">
</pre>
<h4>サンプルコード</h4>
<p>全部まとめたHTMLはこんな感じ</p>
<pre class="brush:[javascript]">
<html>
<head>
<script src="./preloadjs-0.3.0.min.js"></script>
<script src="./soundjs-0.4.0.min.js"></script>
<script>
function init(){
var queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
var manifest = [
{"src":"./bgm.mp3","id":"sound1"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
queue.installPlugin(createjs.Sound);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(createjs.LoadQueue.SOUND === type){
startSound(item.id);
}
}
function startSound(soundid){
var instance = createjs.Sound.createInstance(soundid);
instance.setVolume(0.1);
function doStop(){
instance.stop();
}
function doPlay(){
instance.play();
}
document.getElementById('stop').addEventListener('click',doStop);
document.getElementById('play').addEventListener('click',doPlay);
}
}
window.onload = function(){
init();
}
</script>
</head>
<body>
<input type="button" id="play" value="play">
<input type="button" id="stop" value="stop">
</body>
</html>
</pre>
<h4>メソッドいろいろ</h4>
<p>
作成したインスタンスには色々なメソッドが用意されています。<span class="code">play() , stop()</span>以外にも一時停止や再生位置の取得、ミュートなどなどいずれもインスタンスから操作することがでいます。
</p>
<pre class="brush:[javascript]">
var instance = createjs.Sound.createInstance(id);
instance.play(); // 再生
instance.stop(); // 停止
instance.pause(); // 一時停止
instance.resume(); // 一時停止した場所から再生
instance.getVolute(); // 現在の音量を取得 (戻り値 Number)
instance.setVolume(value); // 音量を設定する Ex) instance.setVolume(0.5);
instance.setMute(); // ミュートにする
instance.getMute(); // ミュート状態かどうかの判定 (戻り値 true/false)
instance.getPosition(); // 現在の再生位置の取得 (戻り値 Number)
instance.setPosition(value); // 再生位置の指定
instance.getDuration(); // 再生時間の取得 (戻り値 Number)
</pre>
<h4>Ex)再生時間の半分の位置を指定する</h4>
<p>
公式のドキュメントにあるものを紹介します。<span class="code">setPosition()</span>の引数に<span class="code">getDuration()</span>で取得した値を2で割った値を入れます。
</p>
<pre class="brush:[javascript]">
instance.setPosition(instance.getDuration()/2);
</pre>
<h4>play()に引数を与えて再生を行う</h4>
<p>
<span class="code">play()</span>メソッドに再生時の初期値として繰り返しの有無やボリュームなどを指定することができます。<br>
現在の仕様だと引数の順番が変えられないため、ボリュームだけを指定したい場合にも、それより前の4つの値を指定する必要があります。<br>
その場合<span class="code">setVolume()</span>を使用したほうがいいかもしれません。
</p>
<pre class="brush:[javascript]">
instance.play([interrupt="none"],[delay=0],[offset=0],[loop=0],[volume=1],[pan=0]);
// カッコを省略可
instance.play("none",0,0,0,1,0);
/*
interrupt = "割り込み再生を許すかどうか(?)"
delay = "再生を遅らせる。msで指定"
offset = "再生位置を指定。msで指定"
loop = "ループ回数。-1を指定すると無限ループ"
volume = "音量を指定"
pan = "左右のどちらに音を振るか(HTML Audioでは動かない?"
*/
</pre>
<h4>おわりに</h4>
PreloadJSを読み込む際に指定したidでSoundJSによる再生が行えるので、コード的にもかなりわかりやすく書けるのではないでしょうか。<br>
またSoundJSを利用することでブラウザのAPIに依存しない形でオーディオの再生が行えるのも素敵ですね。
</section>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-35320219482999336522013-03-10T00:48:00.000+09:002013-03-10T00:56:17.550+09:00いろんなところで役に立ちそうなPreloadJSをさわって使い方をまとめてみた
<p>* version 0.3.0を使用 *</p>
<section>
<h2>何ができるか</h2>
PreloadJSを使うと"ファイルの読み込みが終わってから何かする"という方法に一貫性を持たせることができるようになります。 <br>
利用シーンとしてはアニメーションの開始前に必要なファイルを確実に読み込ませたいとか色々考えられそうです。 <br>
</section>
<ul>
<li><a href="#step0">使い方</a>
<li><a href="#step1">画像の読み込みが完了してから処理を行う</a>
<li><a href="#step2">loadFile()の記述方法いろいろ</a>
<li><a href="#step3">loadManifestで複数ファイルを一括で登録する</a>
<li><a href="#step4">completeイベント</a>
<li><a href="#step5">itemのもつプロパティ</a>
<li><a href="#step6"> ファイルの種類を判定して処理を行う</a>
<li><a href="#step7">登録したアイテムをqueueから削除する</a>
</ul>
<section>
<h3 id="step0">使い方</h3>
PreloadJSのサイトからダウンロードします。*執筆時点の最新は0.3.0* <br>
<a href="http://www.createjs.com/#!/PreloadJS">http://www.createjs.com/#!/PreloadJS</a><br>
<h3>APIドキュメント</h3>
<a href="http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html" title="">http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html</a><br>
<h3>PreloadJSの読み込み</h3>
<pre class="brush:[html]"><script src="./preloadjs-0.3.0.min.js"></script></pre>
<h3 id="step1">使用例</h3>
<p>ex) 画像の読み込みが完了してから処理を行う(単一ファイル編)</p>
<pre class="brush:[javascript]">
<script>
function init(){
var queue = new createjs.LoadQueue(true); // PreloadJSのインスタンス作成(ファイルの取得にXHRを使わずにtagによる読み込みを行う場合は引数にfalseを設定する)
queue.loadFile("./image01.jpg",true); // 読み込みたいファイルのURL・パスを登録する。複数行記述することで複数のファイルを登録できる
queue.addEventListener('fileload',handleFileLoad); // fileloadイベントに任意のfunctionを割り当てる
function handleFileLoad(event){ // fileloadイベントに登録したfunction。fileloadイベント発生時に呼ばれる
document.body.appendChild(event.result); // event.resultでfileloadの結果が得られる
}
}
window.onload = function(){
init();
}
</script></pre>
<h4 id="step2">loadFile()の記述方法いろいろ</h4>
<p><span class="code">loadFile()</span>の記述は単純なURL・パスの登録以外にidを割り当てる方法があります。idを割り当てるとidを指定した参照が行えます。<br>
これは複数ファイルを読み込んだときに役に立ちます。<br>
<span style="font-size:11px;">*idを設定する場合の記述はJSON形式で行うのと、ファイルのURL・パスは"src"プロパティにセットする必要があります。</span></p>
<pre class="brush:[javascript]">
queue.loadFile("./image01.jpg");
queue.loadFile( { "src" : "./image02.jpg" } );
queue.loadFile( { "src" : "./image03.jpg" , "id" : "image03" } );
/*
*idを指定しなかった場合のプロパティは以下のように自動的に値がセットされます。*
image01.jpg: src="./image01.jpg" , id="./image01.jpg"
image02.jpg: id="./image02.jpg"
*/</pre>
<h4>loadFile()の第2引数(true/false)</h4>
<p><span class="code">loadFile()</span>の第2引数で<span class="code">queue</span>にあるファイルを登録と同時に読み込むかどうかを決めることができます。<br>
読み込みを開始させたくない場合は<span class="code">false</span>を指定します。<br>
任意のタイミングで読み込みを開始したい場合、<span class="code">load()</span>を実行します。
</p>
<pre class="brush:[javascript]">
queue.loadFile("./image01.jpg",false);
queue.loadFile( { "src" : "./image02.jpg" , "id" : "image02" } ,false);
queue.load(); /* 読み込みは登録した順に行われる */</pre>
<span class="code">true</span>を指定した場合と、第2引数を省略した場合はFileの登録と同時に読み込みが開始されます。<br>
このとき注意したいのは、複数行で<span class="code">loadFile()</span>を行なっている場合、いずれかの行で<span class="code">true</span>が指定された時点で<span class="code">queue</span>の中の全てのファイルを読み込む点です。
<h4 id="step3">loadManifestで複数ファイルを一括で登録する</h4>
<p><span class="code">loadFile()</span>を複数行書くのはめんどくさい。そんなときは<span class="code">loadManifest()</span>を使います。<br>
<span class="code">loadManifest()</span>への登録は配列で行います。<br>
</p>
<pre class="brush:[javascript]">
var manifest = [
{"src":"./image1.jpg","id":"file1"},
{"src":"./image2.jpg","id":"file2"},
{"src":"./image3.jpg","id":"file3"}
];
var queue = new createjs.LoadQueue(true);
queue.loadManifest(manifest,true); /* 第2引数はloadFile()と同じ */</pre>
<h4 id="step4">completeイベント</h4>
<p>
<span class="code">queue</span>に登録した全てのファイルの読み込みが終わってから処理したい場合は<span class="code">"complete"</span>イベントに登録したfunctionで行います。<br>
この場合<span class="code">fileload</span>イベントとは違い、<span class="code">queue.getResult('idかsrcを指定')</span>でファイルを取得します。
</p>
<pre class="brush:[javascript]">
function init(){
var queue = new createjs.LoadQueue(true);
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./image2.jpeg","id":"file2"},
{"src":"./image3.jpeg","id":"file3"}
];
queue.loadManifest(manifest,false);
queue.load();
queue.addEventListener('complete',handleComplete);
function handleComplete(event){
var image = queue.getResult(manifest[2].id); // ex) manifestの2番目のファイルのidを指定して結果を得る
document.body.appendChild(image);
/*
var target = event.target;
target.loaded; // true/false
target.useXHR; // true/false
target.progress // 1(?)
*/
}
}
</pre>
<!--
-->
<h3 id="step5">itemのもつプロパティ</h3>
<p><span class="code">fileload</span>イベントに登録したfunctionにはオブジェクトが渡され、そのオブジェクトには読み込んだ結果と、そのファイルの拡張子や種類などを示すプロパティがセットされています。<br>
渡されるオブジェクトの名前を<span class="code">event</span>とした場合、<span class="code">event.item</span>になります。
</p>
<pre class="brush:[javascript]">
function handleFileLoad(event){ // fileloadイベントに登録したfunction
var item = event.item; // loadしたファイルの情報をもつitem
var type = item.type; // 'image'や'javascript'や'css'などファイルの種類
var ext = item.ext; // 拡張子 ('jpg'などドットを含まない拡張子)
var id = item.id; // loadFile()登録時に指定したid
var src = item.src; // loadFile()登録時に指定したURL・パス
var tag = item.tag; // 読み込んだファイルを扱えるtag名 (画像なら'img' CSSなら'style' JSなら'script' )
}</pre>
<h3 id="step6">ファイルの種類を判定して処理を行う</h3>
<p>ファイルの種類に応じた処理を行いたい場合は<span class="code">item.type</span>と、<span class="code">createjs.LoadQueue</span>の持っているプロパティを比較します。<br>
</p>
<h5>・用意されているプロパティ</h5>
<pre class="brush:[javascript]">
createjs.LoadQueue.CSS // "css"
createjs.LoadQueue.IMAGE // "image"
createjs.LoadQueue.JAVASCRIPT // "javascript"
createjs.LoadQueue.JSON // "json"
createjs.LoadQueue.SOUND // "sound"
createjs.LoadQueue.SVG // "svg"
createjs.LoadQueue.TEXT // "text"
createjs.LoadQueue.XML // "xml"
</pre>
<h4>処理の例</h4>
<pre class="brush:[javascript]">
var queue = new createjs.LoadQueue(true);
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./style.css" ,"id":"file2"},
{"src":"./script.js" ,"id":"file3"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(type === createjs.LoadQueue.IMAGE){
document.body.appendChild(event.result);
}
}
</pre>
<!--
<h4>getResult()の第2引数について</h4>
<p><span class="code">getResult()</span>は第2引数に<span class="code">true/false</span>を指定することができます。<br>
と、ドキュメントにあるのですが使い方がいまいちわかっていません。。わかる方いましたら助言頂ければと思います。。
</p>
-->
<h4 id="step7">登録したアイテムをqueueから削除する</h4>
<p><span class="code">queue</span>に登録したファイルを削除するには<span class="code">remove()</span>か<span class="code">removeAll()</span>を使います。
</p>
<pre class="brush:[javascript]">
/* remove()で一つのファイルをqueueから削除する */
queue.loadFile({"id":"image1","src":"./image.jpg"});
queue.remove("image1"); // idかsrcを指定して削除する
queue.remove("./image.jpg");
/* removeAll()で全てのファイルをqueueから削除する */
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./style.css" ,"id":"file2"},
{"src":"./script.js" ,"id":"file3"}
];
queue.loadManifest(manifest,true);
queue.removeAll(); // 0.3.0ではバグがありremoveAll()を実行するとエラーが出ます。
</pre>
<p><span class="code">removeAll()</span>は0.3.0ではバグのため動きません。-> <a href="http://community.createjs.com/discussions/preloadjs/123-removeall" title="">http://community.createjs.com/discussions/preloadjs/123-removeall</a><br>
次のバージョンを待つか、<a href="https://github.com/CreateJS/PreloadJS">github/PreloadJS</a>にあるソースからbuildを行えば<span class="code">removeAll()</span>が使えます。<br>
*もしくはminifyされたpreloadjs-0.3.0.min.jsを開いて22行目の<span class="code">this.initialize(this.useXHR)</span>を<span class="code">this.init(this.useXHR)</span>にすれば動きます。
</p>
</section>
<h3>しめ</h3>
<p>基本的な使い方はこんな感じでしょうか。<br>あとはドキュメントを読むといろいろとメソッドが用意されているので使い込みたい人は<a href="">ドキュメント</a>と<a href="http://community.createjs.com/" title="">CreateJS Support</a>を参照してみてください。</p>
<p>PreloadJS以外にもSoundJS/EaselJS/TweenJSなど、CreateJSが今後フロントエンドでは主流となると個人的には思っています。いまのうちにさわっておくと色々と捗りそうです。</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-19843143739949177302013-02-07T01:28:00.000+09:002013-02-07T01:28:41.471+09:00[etc] Sublime Text 2のショートカットをNetbeansのショートカットに置き換える<div style="padding:10px;">
ビッグウェーブの初期にST2を触って諦めてたけど,この度再挑戦。<br>
Netbeans歴も4年になるけどそんなに使いこなしてるわけでもないからまずはよく使うショートカットから徐々に置き換えて行こうと思う<br>
<br>
<strong>よく使うやつ</strong>
<ul>
<li>ctrl+shift+up/down : (swap_line_up/swap_line_down) 行スワップ
<li>cmd+shift+up/down : (duplicate_line) 行コピー
<li>cmd+e : ({"file": "Packages/Default/Delete Line.sublime-macro"}) 行削除
<li>cmd+shift+left/right : (unindent/indent) 左右行シフト
</ul>
このへんは特に作業速度に直結する。<br>
これだけでもかなりNetbeans感が出ていい感じ。<br>
<br>
設定ファイルはgithubで公開しつつ更新していく予定。(githubの練習がてら)<br>
<a href="https://github.com/nakajmg/st2nb" style="color:rgb(47, 185, 255);text-decoration:underline;font-size:15px;">github.com/nakajmg/st2nb</a><br>
<br>
使いこなせるようにがんばろ
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-31062143602931711072013-02-06T03:00:00.000+09:002013-02-06T03:05:33.641+09:00[HTML] input要素のdisabled属性を考えるカンファレンスとかでセッションの一覧から参加したいセッションを選ぶ、なんて形式のがたまにあります。<br>
会場の広さなどから1セッションあたりの参加人数が限定されていて、人気のあるセッションなんかは割とあっさり埋まりがちです。<br>
満席になったセッションは大体の場合、表題にあるinput要素にdisabled属性が設定され、チェックがつけられなくなることでそのセッションには登録できなくなります。<br>
<br>
<p>で</p>
普通であれば<strong>「disabled属性のついた要素の値はフォームから送信されない」</strong>ので、満席のセッションに登録できないようにするには十分なように思われます。<br>
<br>
<p>でも</p>
このdisabled属性、ChromeのDevtools等のDOM要素がいじれる系ツールが使えればあっさりと消去することができちゃいます。<br>
するとどうでしょう、本来なら「満席で登録できないセッション」を選択したデータがフォームからサーバに送られてしまうのです。。。<br>
<br>
こういうフォームを見つけると好奇心から満席のセッションが登録できるか試すんですが、今のところほとんど登録できちゃってます…(取り消しますけど)<br>
<br>
<p>うん</p>
サーバサイドでもちゃんとデータの妥当性?のチェックはしましょうねというおはなし。<br>
<br>
(まー対応するコストと見合わないのかなーとか思ったり。formの要素をごまかして送るなんて他にもいくらでも方法あるだろうし。<br>Webがオープンな物であることには大賛成だけど、デバッグツールでなんでもかんでも見れていじれちゃうのってどうなんだろ?とか最近ちょっとだけ考えてる。<br>将来「デバッグツール拒否」フラグみたいな物ができちゃったりしないかなーといらぬ心配をしております。HTML/JS/CSSは誰からでも見れるものという常識が変わる日がいつか来るのだろうか)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-48897201605220280882013-02-01T00:58:00.001+09:002013-02-01T00:58:43.648+09:00Java ♡ HTML5 Nightに参加してきたJJUGとhtml5j.orgのコラボ!<br>
<p>詳細は→ <a href="http://kokucheese.com/event/index/70487/">http://kokucheese.com/event/index/70487/</a>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7kF7SAoD9O9fdZLn1PMy4tkuXbHbJeKYvvdodA_LHgG8SH11cEOljIXxPKUYz4aaNulfzmUPHE90v3bkR67ET4Gho2Iql6R2XktMtrn-KOJ8Xt4_h8z8hqSpm5OuSuomBfsaU1Mkilok/s1600/21a7f28a6b8811e28abf22000a1f9bf5_7.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="400" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7kF7SAoD9O9fdZLn1PMy4tkuXbHbJeKYvvdodA_LHgG8SH11cEOljIXxPKUYz4aaNulfzmUPHE90v3bkR67ET4Gho2Iql6R2XktMtrn-KOJ8Xt4_h8z8hqSpm5OuSuomBfsaU1Mkilok/s400/21a7f28a6b8811e28abf22000a1f9bf5_7.jpg" /></a></div>
<p><br>html5jからは白石さんとひらいさんが出てWebSocketの話をしたみたいです。</p>
<br>
「みたいです」っていうのも今回自分はお手伝いとして受付にべったり90分コースでした(@@)<br>
「HTML5とか勉強会」でもときどき受付をやることがあるけど,今回の参加者はスーツの方が多く(9割以上?)Javaな人たちでいっぱいな感じ(とか勉は私服の人が多い)<br>
<br>
寺田さんと桜庭さんのセッションは聞けたけど,いかんせんJavaの教養が専門学校止まりなのでなんともかんとも。<br>
でもJSFのajax通信の簡単さとかJavaFXのbindなんかはWeb系な感じで「いいかも」と思いました。<br>
<br>
JavaFXのセッション中に専門学校の卒業研究でSwing使ったのを思い出してなんだかおセンチな気分になりました。<br><br>おしまいUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-27094785210969580232013-01-30T18:21:00.001+09:002013-01-30T18:21:30.361+09:00[Chrome] [Mac] UA変更がめんどくさくなったからbashrcに直接書くChromeのアップデートでDevtoolsのUA変更のチェックボックスが新規タブに引き継がれなくなった。<br>
UA判定してるページのデバッグのときめんどくさいので初心に戻って引数でUA変えて起動しちゃいましょう。<br>
<br>
<div style="border:1px solid #fff;background-color:#eee;color:#333;padding:5px;">
iphone(){<br>
command open -a Google\ Chrome\ Canary.app --args --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3"<br>
}<br>
</div>
あとはコマンド実行するだけ(既に同じChromeが起動してる場合プロファイルわけるとかしないとだめ)<br>
<div style="border:1px solid #fff;background-color:#eee;color:#333;padding:5px;">
$ iphone
</div>
<br>
ほんとはaliasでスマートに引数使ってやりたかったんだけどできないらしいから関数にしてみた。<br>
結局引数使わないことにしたからaliasで書けるんだろうけどまぁいいか。<br>
<br>
あとメインのChromeでやるとPCサイト見るのめんどうだからCanaryでデバッグするようにした(逆のほうがいいかも)<br>
プロファイルわけるとかめんどうだしUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-74647333514595598382013-01-22T17:44:00.001+09:002013-01-22T18:12:02.126+09:00[HTML5] HTML5とか勉強会#35に参加してきたテーマ<br>
<section>
<h2>Web+OS最前線!</h2>
<ul>
<li>Tizenの概要/今村 博宣さん
<li>Tizen APIの概要/高橋 成人さん
<li>Firefox OS(仮)/浅井智也さん
</ul>
<section>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZ86bGZ_JwtaPwShKHOV4J2rg_2ba3tMZyai916pCk93NoyxwbbqL5nUwZqhwXQ0e-LtQZ55JTiqo_6dOU5nOjfbF-kRxWhwwXhdeMGLJVDsXlprwraztIj-pDIkXxOqWS1b4k7KYNEo/s1600/GOPR2830a.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="300" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZ86bGZ_JwtaPwShKHOV4J2rg_2ba3tMZyai916pCk93NoyxwbbqL5nUwZqhwXQ0e-LtQZ55JTiqo_6dOU5nOjfbF-kRxWhwwXhdeMGLJVDsXlprwraztIj-pDIkXxOqWS1b4k7KYNEo/s400/GOPR2830a.jpg" /></a></div>
<section>
<h3>Tizen</h3>
Tizenの立ち位置ってどんな感じなのかなと思ってたけど,車載用はTizen IVI,モバイル用はTizen Mobileと現在主に2系統あるってのは全く知らなかった。<br>
<br>
Tizen Mobileはそんなに流行る気がしないと思ってるけどTizen IVIの方は未来がありそうな予感というか期待。
</section>
<br>
<section>
<h3>Firefox OS</h3>
Firefox OSの情報は漠然としか知らなかったけど,今回の勉強会でかなり興味を持った。<br>
カーネルの上に乗ってるのがGeckoエンジンだけでJVMとかのボトルネックがない分,高速でスリムなHTML5・JS・CSSを実行できる環境てのはすごくいいと思う。<br>
Mozillaの目指してる<strong>ネイティブアプリ=Webアプリ</strong>な世界は是非とも到来してほしい(させたい)と思う。<br>
<br>
勉強会の最中に早速シミュレータ入れたのでグリグリいじって遊びたいと思います。コンコン
</section>
<br>
<section>
<h3>スペシャルゲストとその後の展開!</h3>
今回の勉強会は会場がKDDIさんでした。セッションの合間にスペシャルゲストとしてなんとKDDI代表取締役の田中孝司氏が登場!<br>
田中氏はHTML5とかのWeb技術にとっても興味があってこういった技術をもっと押していけるように支援したいと言ってました。html5jとKDDIはズットモ!<br>
<br>
自分は聞けなかったんですが,その後の囲み取材でKDDIがFirefox OS搭載端末の販売を検討していると判明したとのこと!<br>
<p><a href="http://japan.cnet.com/news/service/35027172/">http://japan.cnet.com/news/service/35027172/
</a></p>
すごく楽しみ
</section>
<br>
今回の勉強会の詳しい内容はまたレポート記事で書く予定です。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-77322297263017507862013-01-21T14:31:00.001+09:002013-01-21T14:31:03.855+09:00[CSS]display:tableを設定した場合のwebkitのバージョンによる解釈の違い?レイアウト組むときにdivにdisplay:table使うことがあるんだけども<br>
display:tableを指定した要素にwidthも一緒に設定するとどうやら古いwebkitではwidthのプロパティが無視されるらしい。<br>
手持ちで確認できたのはiOS5.1.1のSafari(iPhone4S)とGalaxyS2LTEのAndroid2.3.6の標準ブラウザ<br>
<br>
Androidブラウザ爆…Safariもだから許したUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-84685992452491133852013-01-21T13:55:00.004+09:002013-01-21T13:55:56.628+09:00[Chrome] Dev toolsのUA設定が新規タブに引き継がれなくなったChromeのバージョン 24.0.1312.52の話<br>
<br>
Dev toolsのUser-agentの設定が保持されないようになったのか新規タブを開くたびにUser-agent変更のチェックボックスをクリックしなくちゃならなくなった<br>
<br>
バージョン 23.0.1271.101ではどこかのタブでUA変更のチェック入れたら新規タブでDev toolsを開いた場合にチェックが保持された状態になってた<br>
保持されなくなっちゃったせいUA判定して表示切り替えてるページのデバッグ速度が相当遅くなった<br>
<br>
解決方法も見つからないし個人的にすごく困るのでしばらくバージョン戻して使う(通知なしの自動更新はんたーい)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-23194209391058283532013-01-21T13:44:00.003+09:002013-01-21T13:46:00.327+09:00MacのChromeでDev toolsがエラーで表示できなくなったMac版のChrome(バージョン 24.0.1312.52)でDev tools開いてUAとかTouch event設定するために歯車をクリックするとエラーでDev toolsがクラッシュする症状が起きた<br>
<br>
原因はabout:flagsの<br>
:JavaScript の試験運用機能を有効にする<br>
ウェブページで JavaScript の試験運用機能を使用できるようにします。<br>
<br>
これがONになってるせいだった。OFFにしたらエラー起きなくなった:)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-16866847792755145462012-07-25T12:31:00.000+09:002012-07-25T12:31:01.887+09:00第31回 HTML5とか勉強会活動報告をかきましたhttp://gihyo.jp/news/report/2012/07/2401
ちょっと遅くなりましたが公開されました
今回テーマはJavaScriptのMVCフレームワークだったのですが
自分自身MVCに精通してるわけではないので勉強会中も頭がおいつかなくてどうしような感じでした
もっと自力をつけてしっかりとした記事が書けるようになりたいですUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-28491769813897188582012-06-21T12:39:00.003+09:002012-06-21T12:39:48.230+09:00[CSS] background-positionの垂直中央配置がmiddleじゃなかった縦方向の中央配置がmiddleだと勘違いしててinvalid property valueになっていた
調べてみるとbackground-positionではmiddleではなくcenterで縦中央に寄せるらしい
background-positionで指定できる値
縦方向:top, center, bottom
横方向:left, center, right
background-position: center center;
で期待する配置にできて満足Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-60271585704426382392012-06-21T00:33:00.002+09:002012-06-21T00:33:25.004+09:00第30回HTML5とか勉強会に参加してきました今回もレポート書かせていただきました。
http://gihyo.jp/news/report/2012/06/1901
早いものでもう30回目
20回のConferenceがこの前のように感じる
色んな人と出会ったり,普通じゃできないような体験をさせてもらってる
お世話になりっぱなしなので何か返せたらなと思う今日このごろ
精進しますUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-16147028600722444852012-05-21T17:28:00.002+09:002012-05-21T17:28:30.887+09:00[jQuery] .toggle('slow') のアニメーション開始位置を決めるjQueryのtoggleメソッドは,指定が何もない場合は表示/非表示の切り替えをするだけです
$("#hash').toggle();
引数にslow,normal,fastのいずれかを指定することでアニメーション付きで表示/非表示の切り替えができます
このアニメーションの開始位置は表示を切り替える要素の位置に依存しているらしく,positionを指定することで開始位置を決めることができます
右下から出したい場合はrightとbottomを指定,右上ならrightとtopを指定するといった感じです。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2257557505359717969.post-35111366599014338982012-05-15T16:44:00.001+09:002012-05-15T17:09:27.186+09:00Macにbrewでapacheを入れるbrewのバージョンが古かったせいでbrew tapが使えなかった。<br />
brew updateを試すもよくわからないエラーが出て更新できない。<br />
<br />
結局brewを削除して新しいversionのを入れて解決<br />
以下参考にしたサイトと手順<br />
<br />
Macでhomebrewをアンインストールする - foldrrの日記 (id:foldrr / @foldrr) <a href="http://d.hatena.ne.jp/foldrr/20110807/p1">http://d.hatena.ne.jp/foldrr/20110807/p1</a><br />
<br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">$ cd /usr/local</span><br />
<div span="" style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">
$ sudo rm -rf Cellar<br />
$ brew prune<br />
$ sudo rm -rf .git .gitignore bin/brew Library/ README.md share/man/man1/brew<br />
$ sudo rm -rf ~/Library/Caches/Homebrew/</div>
<br />
これで削除される(brewでインストールしたアプリの情報も消える)
<br />
<br />
brewのインストールし直し<br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;"><br /></span><br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">$ </span><span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"</span><br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;"><br /></span><br />>これでtapが使える<br />
tapでapacheが登録されているFomulaを追加する<br />
<span style="color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace;"><span style="white-space: nowrap;"><br /></span></span><br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">$ </span><span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">brew tap Homebrew/dupes</span><br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">$ </span><span style="color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace;"><span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">brew install httpd</span></span><br />
<span style="color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace;"><span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;"><br /></span></span><br />
apacheの設定ファイルは<br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">/usr/local/etc/apache2</span>にあるhttpd.conf<br />
<span style="color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace;"><span style="white-space: nowrap;"><br /></span></span><br />
apacheの起動は<br />
<span style="background-color: #f8f8f8; color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace; white-space: nowrap;">$ apachectl start/stop</span><br />
<span style="color: #333333; font-family: 'Bitstream Vera Sans Mono', Courier, monospace;"><span style="white-space: nowrap;"><br /></span></span><br />
OX Xのデフォルトのapacheが動いているとめんどくさいのでシステム設定の[共有]から[Web 共有]のチェックを外すUnknownnoreply@blogger.com0