Archive for the ‘ 開発ツール・技術 ’ Category

ChromeのDeveloper Toolsを開いていると「再読込」のメニューが増える

Pocket

知らなかった。ChromeのDeveloper Toolsを開いておくと「再読込」ボタンを長押しした時のメニューが増えるようです。

スクリーンショット 2015-12-09 14.39.24(2)

↑ キャッシュの消去とか便利ですね。

Command+Shift+Deleteもいいのですが、これも知っておくといいですね。なお、以下のブログで教えてもらいましたよ。

» Chrome – The Reload button provides extra… | Little Big Details

お手軽なコードレビューを実現する『Refactor.io』

Pocket

他の人のコードをちょっとレビューしたいときに使えそう。githubと連携してメール通知を受け取ることもできますよ。

Refactor.io - Share your code instantly for refactoring and code review.

↑ コードを書いてSubmitするだけ。

Refactor.io - Share your code instantly for refactoring and code review.-1

↑ するとURLをもらえるのでそれを共有すればOKです。

Refactor.io - Share your code instantly for refactoring and code review.-2

↑ diffも見られるので便利。

gitでpull requestだ、という手順でもいいですが、もっと手軽にコードレビューしたいときもありますよね。というわけでご利用は以下からどうぞ。

» Refactor.io – Share your code instantly for refactoring and code review.

画面をキャプチャするとマリオのステージを自動生成してくれる『Screentendo』

Pocket

なにこれ、無駄にすごい。画面をキャプチャするとマリオのステージを作ってくれるプログラムです。

Screentendo | Aaron Randall

↑ こういうステージを作ってくれます。

↑ 映像の方がわかりやすいですかね。

ソースはGithubで公開されているようです。

» Screentendo | Aaron Randall

@fladdictさんのインタラクティブ・プログラミング勉強会で「手触りの作り方」を学ぶ

Pocket

The guild

@fladdictさん(=深津さん)が開催する勉強会に参加するようになって半年が経ったのでまとめてみます。すごく楽しい。

■ これまでのあらすじ

  1. インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict」を見かける。
  2. こ、こういうのが知りたかった!ということで深津さんに速攻連絡、「立ち見でいいので参加させてください!」と前のめりに頼み込む。
  3. 勉強会に初めて参加したのが2014年の年末あたり。THE GUILDの若手メンバーのレベルの高さや、「え、あの作品つくったのあなたですか!?」的なすごい人に萎縮しつつも勉強開始。
  4. なんだかんだと毎回勉強会に参加。毎回、新しい発見があって楽しすぎる。
  5. (周りのメンバーに比べるとまだまだですが)ようやく勘所っぽいものがわかってきたのでブログにまとめてみる(← イマココ)。

■ 何の勉強会?

上に紹介したブログでも紹介されていますが、インタラクションをデザインするためのプログラミングを学ぶ会です。以下、深津さんのブログから引用。

巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。

文章で表現するのは難しいのですが、「うにょうにょしたり」「もにゅもにゅしたり」といった「手触り感」を実現するための基礎が学べます。個人的には自分に足りていない「オシャレ」とか「イケてる」感を論理的に学べるのがとっても嬉しい。

■ 勉強会では何をしているの?

  1. 毎回のテーマごとに深津さんがライブコーディングしながら講義をしてくれます。「色」「乱数」「ばね」とか。15分のこともありますし、30分ぐらいのこともあります。ちなみにツールはProcessingを使います(Java)。
  2. そのあとは「じゃ、何か作ってください」と突き放されます笑。90分から2時間ぐらい個々人でテーマに沿った作品を作ります。わからなくなったり、詰まったりしたら深津さんに聞くとアドバイスを貰えます(後述しますがこれがすごい)。
  3. 最後に個々人が作ったものを発表して終了です。

■ 何が楽しいの?

深津さんの講義自体は基本の公式とか、ちょっとしたコツとか簡単なものなのですが、個々人が作った作品に対するアドバイスが的確で毎回感動します。

「あー、これはですね、ここをこうするともうちょっとオシャレになりますよ」といいながら2、3行加えるだけで「うぉ、まじか!」みたいになるので、「この人の引き出し、どれだけ・・・」とクラクラきちゃいますね。

彼が付け加えるコードはほんの数行だったりするのですが、「あぁ、そういう使い方か!」という論理的な発見があって勉強になりまくりです(軌跡を半透明にすることで煙のようなエフェクトを出したり、さらにパラメータを変えて粒子が輝くようにしてみたり)。

深津さんによくよく話を聞くと「これに気付くまでに一年ぐらいかかりましたね」といった技もするりと教えてもらえたりするので、あぁ、なんかありがたいなぁ涙・・・と感動してしまうことしきりです。

2015 04 09 03 18 07

↑ 勉強会だけでは追いつかないので自習もしています。

2015 04 09 03 18 32

↑ あとで紹介しますが、この本がとにかくすごい。

■ で、何つくったの?

他のメンバーの方のレベルが高すぎるので自分的にはかなり恥ずかしいのですがいくつかご紹介。こういう動きを作ってみたかったのですよね・・・。

↑ 初歩の初歩ですが・・・。音声なしです。

ちなみに音声なしなので登場順でつくったものをご紹介。

  1. 立体キューブ。マウスの動きでズームします。何もしていないときでもゆっくり動いているのがお気に入り。
  2. 立体キューブをたくさん。ちょっと動きがばらけていますが・・・。パラメータをインタラクティブに操作できるパネルをつけはじめたのもこのあたりから。
  3. ベジェ曲線のツールもどき。マウスで何かをドラッグする、という動きを作れて嬉しかった。
  4. 正方形のフラクタル。ちと色味があれですが・・・。ただフラクタルの仕組みがわかって勉強になりました。
  5. 円の変形エフェクト。簡単なものですが、自分の意図する動きになった時は感動・・・。
  6. 円をたくさん跳ねさせています。クラスを使ったり、物理演算したり、位置/速度/加速度が指になじんできた感じです。
  7. フラクタルの勉強で作った漫画的エフェクト。個人的には黒い円が回転するのがお気に入り。
  8. バネを使ったうにゃうにゃ的なエフェクト。バネが作れるようになるとすごく表現に幅が出てきますね。

■ 3冊のバイブル・・・!

深津さんにおすすめしてもらったこの3冊が神すぎる・・・。これ系の業界の人にとっては常識っぽいのですが、個人的には「こんな体系的に教えてくれる本があったなんて!」という意味で衝撃的でした。

ちなみに勉強会は週一なので、平日はこの本のサンプルを写経していたりします。かーなーりー勉強になります。この3冊をマスターすればかなりすごいことになるのではないでしょうか・・・。

まずは「ジェネラティブ・アート」。Processingを使ったレベルの高いアート作品が紹介されています。打ち込んで実行すると「おぉ!」となるので、プログラミング初心者に戻ったような感覚を味わうことができました笑。

4861009634
[普及版]ジェネラティブ・アート―Processingによる実践ガイド
マット・ピアソン,Matt Pearson,久保田 晃弘,沖 啓介 ビー・エヌ・エヌ新社

そして次が「Generative Design」。英語オンリー&1万円オーバーなのでかなりハードルは高いのですが、深津さんの勉強会でカバーするようなトピックが解説されています。現在せっせと写経中ですが、先がかなり長い汗。

1616890770
Generative Design: Visualize, Program, and Create with Processing
Hartmut Bohnacker,Benedikt Gross,Julia Laub,Claudius Lazzeroni Princeton Architectural Press

最後が「Nature of Code」。物理的な現象をコードで表現するための理論が学べます。和訳というか本の体裁がちょっと微妙なので本家サイトで見るのもいいかもしれません(英語ですが中身は一緒です)。

4862462456
Nature of Code -Processingではじめる自然現象のシミュレーション-
ダニエル・シフマン,Daniel Shiffman,尼岡 利崇,鈴木 由美,株式会社Bスプラウト ボーンデジタル

ちなみに著者のDanielさんはProcessing界では有名な人ですね。彼の講義ビデオはVimeoにあがっているので(英語ですが)興味がある人は是非どうぞ。すごくわかりやすいです。

↑ この人です。テンションがやばい笑。

■ その他、参考情報

勉強会のログはこちらでもまとめられています。これを書いている@cocoponさんのレベルが高すぎて毎回へこむ苦笑。

» インタラクティブコーディング勉強会 | ここぽんのーと

また勉強会に興味のある人はFacebookグループを覗いてみるといいかもしれません。

» Interactive Coding

「ページの先頭に戻る」をエレベーター風に表現した『Elevator.js』

Pocket

最初なんのこっちゃ、と思いましたがなるほど笑。

Elevator js

↑ ページの先頭に戻る、を実現するスクリプトです。

Elevator js 1

↑ 一番下までいって是非お試しください。

デパートのサイトなんかで使うといいんじゃないですかね。

» Elevator.js

JavaScriptとECMAScript、CommonJS/AMD/Browserify/RequireJS/Webpack、TypeScriptに関する覚え書き

Pocket

NewImage

タイトルのままですが、いまいちすっきりしなかったので調べ物をしました。以下、今のところの理解をざっくりと。なお、突っ込みどころ満載かと思いますが生暖かく読んでもらえればと思います。

あと気にはなっているのですがReactとかはまだ調べてません!

■ JavaScript今昔物語

  • Netscapeが開発。最初Livescriptとしていたけど当時Javaが人気だったのでそれにあやかって(←おかしい)JavaScriptと命名。JavaとJavaScript、言語的にはまったく関係ない。「あ、今Java勉強しています!」「…JSだよね」的な悲劇の始まり。
  • 無料のNetscapeに搭載されたJavaScriptを見てMicrosoftがその人気に嫉妬。Internet Explorerにも載せよう!と思ったらまさかのNetscapeからのライセンス拒否。「ちっ、しゃーねーな」ということで似たようなJScriptを独自で開発開始。しかしブラウザ戦争とともに両社の仕様は乖離するばかり。「もうやめて!開発者のライフはゼロよ!」
  • このままじゃまずいってことでEcmaインターナショナルなる国際団体が「まぁまぁ、ちょっと仕様まとめようぜ!」と名乗りをあげる。いろいろあってECMAScript 3なるバージョンが完成(ちなみに読み方は「エクマスクリプト」。テクマクマヤコンに似てますね!)。だいたいのブラウザで実装される。
  • ECMAScript 4ではさらにモダンにクラスだなんだと盛り込もうとしたけど「いや、今のバージョンと違いすぎね?」「ECMAScript 3.1作ってたのに!(Yahoo!&Microsoft)」という事態になってしまい、バージョン4は幻と消える。
  • そのあともいろいろあったけど和解してECMAScript 3.1をベースにしたECMAScript 5が完成。モダンブラウザでほぼ実装が完了。ただ厳密モードとかJSONまわりとかがちょっと便利になった感じの変更である。
  • 現在(2015年)ではJavaScriptがそうとう盛り上がってきたため、ECMAScript 6(ES6)が完成に向けて進行中。ES6ではクラスベースのオブジェクト指向やモジュール、静的型付などが盛り込まれ、大規模開発にも耐えられる本格的な言語になる予定。

■ JavaScriptにおける大規模開発をめぐる動き

  • ES6が盛り上がる前から「JavaScriptがいい感じなので大規模開発に使いたい!」というニーズが顕在化。
  • 「JavaScript、ブラウザだけで使えるのもったいない、どこでも使えるようにしよう!でも今の仕様だと無理ゲーっぽい(泣)」「よーし、仕様作っちゃうぞ!その名もServerJSだ」「サーバーだけじゃなくない?」「じゃ、CommonJSだ!」といって出来たのがCommonJS。あくまで任意団体が決めた仕様。主な実装としてはNodeJSがある、と言い張っているが、NodeJS側では「うーん、どうかな☆」という態度。
  • CommonJSではさまざまな仕様を策定していたが、主なものはモジュール管理。大規模開発になると複数ファイルの依存関係とか管理しないといけないのでそのあたりの仕様を決めようとしていた。
  • 「なんかCommonJSのモジュールの仕様、全然決まらなくない?」「だよねー、じゃ、俺達で決めよう!その名もAMD(Asynchronous Module Definition)、非同期っぽくやるよ!」といって生まれたのがAMD。
  • モジュール管理でCommonJSとAMDが出てきて「えー・・・なんか一緒にしちゃおうよ」と言って生まれたのがUMDだけどあんまり話題になっていない模様(悲しい)。
  • どちらにしろCommonJS派とAMD派に分かれて実装が検討された結果、AMD派からRequireJSが生まれる。これを使えばたくさんのJSを読み込み順にずらずらと並べる必要がなくなって依存関係がすっきり書けるように。
  • CommonJS派からも対抗してBrowserifyが生まれる。関係ないけどロゴがハリーポッター風。
  • 「RequireJSとBrowserifyのいいとこどりして、さらに機能拡張するぜ!」といって生まれたのがWebpack(← だいたいイマココ)。

■ やっぱりES6でしょ

  • 「CommonJSとAMDもいいけど、やっぱりES6にもモジュール管理あるし、それ待ちたいなぁ・・・あ、ES6の仕様を先取りしたTypeScriptがあるじゃん!」ということでTypeScriptも盛り上がっている模様。
  • 余談ですが「ま、とりあえずES6で書いておこうぜ。現行のブラウザに対応するためのライブラリがあればいいんじゃろ?」と言って生まれたのが6to5(現在はBabelに改名)。

というわけで個人的にはTypeScriptを勉強したいと思います。VisualStudioのMacOS版出ないかなぁ・・・(無理か)。

Atomでエディター内の縦線を消す方法

Pocket

ちと調べ物をしたのでシェア。Github製のエディター、Atomで縦線を消す方法です。

Untitled  Atom

↑ 桁数の目安となる線ですが、要らない人には要らない。

で、消し方ですが、デフォルトで導入されているPackageの「Wrap Guide」を無効化すればOKです。

Untitled  Atom 1

↑ これでOK!

気になる人は是非お試しください。

CSS詳細度のグラフを作ってくれるジェネレータ

Pocket

ほう、おもしろい。CSSの詳細度をグラフにしてくれるツールです。

CSS Specificity Graph Generator  by Jonas Ohlsson

↑ こんな感じ。

こちらのエントリーで説明されていますが、急激にあがるところがあるのはよくない、徐々にあがっていくのがいい、ということらしいですよ。

NewImage

↑ こういうのがいいらしい。

試してみるにはCSSをざっとペーストしてあげればOKです。URLから作ってくれたらさらに便利っぽいですが。気になる方は以下からどうぞ。

» CSS Specificity Graph Generator – by Jonas Ohlsson

立体視画像が簡単に作れる『MagicEye.js』が楽しそう

Pocket

これ、いいのでは。Canvasに描いた絵を立体視画像にしてくれます。

MagicEye js

↑ ソースも公開されています。

MagicEye js 1

↑ 元ネタ画像はこのように描きます。色が濃いほど前にくる感じ。

MagicEye js 2

↑ エディターもついています。

秘密のメッセージ何かを作るのにいいかも?!

» MagicEye.js

マテリアルデザインの波紋エフェクトを実現する『Rippler』

Pocket

未だにマテリアルデザインが何かよくわかっていないですが、タップすると波紋のようなエフェクトが起きるのは知っています汗。というわけでそれを実現するプラグインをご紹介。Bootstrapとあわせて使うこともできます。

Rippler  Effect that spreads like a wave in touch or click

↑ マークアップもBootstrapっぽい。

Rippler  Effect that spreads like a wave in touch or click 1

↑ イメージに対しても適用が可能。

他にもいろいろオプションがありますね。興味がある方は以下からどうぞ。

» Rippler · Effect that spreads like a wave in touch or click.