jQueryのイベント発火順を簡単にチェックできるツールよ
たぶん誰も使わないと思うけどはっとく。iPhoneとかでチェックするのに便利なようにつくってある。下のは埋め込みだけど、モバイル用のフルスクリーンはこのリンクから→ jQuery(1.11.1) event checker
javascriptオンラインエディタを比較せし(2014-11)
ブラウザで手軽にjavascriptを実験したり開発したりするサービス、最近ではもう色々ある。昔はjsFiddleが有名で、なんとなくずっと使ってたんだけどviewport（というかheadのカスタマイズ）に対応してない。
stackoverflowに同じような質問があって、ハックみたいなことやってなんとか埋め込んだはいいけど、デフォルトのツールバーみたいなものが強制的に入ってやはりうまく表示されないので、他のを試してみることにした。
ポイントはこんな感じ
- Emmet(ex:zen-coding)に対応してる
- cssとかちゃんと補完してくれる
- ライブラリがきれいに追加できる
- UIがごちゃごちゃしていない
- viewportの対応が簡単
jsFiddle
Create a new fiddle - JSFiddle
上に書いたけどviewport対応してないのと、スマホ用のフルスクリーンビューのURLにアクセスできる場所がわかりづらい（「share」のinput:textの中）。UIも書く場所とアウトプットがデザイン的に区別されておらず、あまりよろしくない。保存する度にバージョンごとのURLを発行してくれる反面、Set as baseを毎回クリックしないとバージョンなしのURLに反映されないので別デバイスなどでの頻繁な確認には不向き。Emmet対応や補完は優秀。
Codepen.io
CodePen - Front End Developer Playground & Code Editor in the Browser
エディタのカスタマイズ機能が優秀で、フォントサイズや見た目を自由に変えられる点がすばらしい。登録して開発環境のようにがっつり使うイメージだけど、手軽にも使える柔軟性がある。
補完機能があまり賢くなく、思ったように補完されることはまずない。text-align: center; と入力したくて text-al まで打って tab 押しても平気で text-transform: とかになる。Emmetには対応。
アウトプットは基本オートリロードで使いやすいのだけど、たまに更新に失敗することがある。スマホ対応はツールバーが出るが邪魔せずデザインもいいので使いやすい。外部CSSが読み込めたり、パネルレイアウトを選べたり、他にも機能満載。補完が致命的で本当に惜しい。
JSBin
JS Bin - Collaborative JavaScript Debugging
機能的には申し分なく、Emmet使え、Codepenと違って補完も優秀。htmlではhtml、headを含めたソース全体の記述ができる。ライブプレビューのオンオフが設定でき、自動でJSLintがかかるためミスに気づきやすい。コンソールビューが用意されているのも特徴。
フォントサイズ、テーマなどエディタのカスタマイズも可能。Saveごとにバージョンを保存してくれ、URLはバージョンなしで最新バージョンにアクセスできる。一見シンプルだけど本当によくできてるなあ。
cssDeck
CSSとあるがjsの記述も可能。JSBinが優秀すぎてまだ試してない・・
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
他にもありそうだけど、とりあえず以上です。個人的にはJSBinかな。
enchant.jsの使えないと感じた点を列挙いたす
canvas使ってミニゲームのwebアプリを作る案件でenchant.jsを使ってみたけど、かなり微妙な点が目立った。どこにも情報がなかったので書いておく。バージョンは0.8.2。
手動で設定したviewportが効かない
enchantが読み込み時に自動で上書きしてしまうので、enchantの読み込みより後にmetaタグを書くとよい。ユーザがゲーム作るのに必要な作業をできるだけ下げようとしているのかもしれないが、これでは業務には使いづらい。
レンダリング後にステージの位置やサイズを変更できない
例えば、margin: 0 auto; や、position: absolute などでウィンドウサイズに合わせて中央配置などができない。これはenchantの仕様のようで、タッチ領域を描画要素と別個に扱っておりレンダリング時に設定されるような挙動になっているため、レンダリング後に表示要素の位置やサイズに変化があっても、タッチ領域が追従してくれずズレることになる。
これはかなり致命的で、ポートレートとランドスケープの切替時やiPhoneでステータスバーが出てきた場合などに、左右中央配置を保ってステージサイズをフィットさせることなどができない。
ステージの拡大縮小が面倒
上記の仕様で、cssで手軽にステージサイズを変更することもできない。拡大縮小自体は適当なタイミングでgame.scaleを呼ぶことでなんとかできるけどー
GroupがあるのにSpriteをまとめて表示や拡大縮小ができない
Groupにscaleがセットできないしvisibleも使えない。これらの用途は当然期待されると思うんだけど。
アニメーションのメソッドチェーンで所々よくわからない挙動
repeat().then()とか、exec().then()とかできない。あとloop()とかcue()とかも組み合わせによって動かないものがある。直感的じゃないと思うなあ。
-
こんな感じ。特にステージ関連の仕様がわかりづらかったり不便。。
Chrome拡張 「Create Link」のfilterってどうなってんだと思いおまたスコスコ参上
Chrome extension、Create Linkのfilterの使い方。どこにも載っていないのでコードより。
filterは生成した文字列の最後に置換処理を行う機能。使うには設定でfilterの項目に正規表現で入力する。フォーマットは
s/変換前/置換後/
sは必須。最後にオプションでwを付けることも可能。
・・・
これで動くはずだったけど、バグがあって%input%を使った時以外、deferedのpipeをすり抜けており動作しない模様。background.jsの99行目に下記のコードを加えると一応動いた。
if (def.filter) {
var m = def.filter.match(/^s\/(.+?)\/(.*?)\/(\w*)$/);
if (m) {
data = data.replace(m[1], m[2]);
}
}
この処理、応急処置的でよろしくない。
ちゃんと対応してpullリクエスト送ろうと思う。
iPhoneでGoogleMapsのマイマップを見るアプリを探しごんすごわすゴンス
行きたいところをメモしておくのに、GoogleMapのマイマップを使っている。ネットで見つけた行きたい場所をマイマップに保存しておいて、近くに行ったときに寄れる場所がないかスマホで確認する、という感じに使う。コメント欄にどこで知ったのかなどの情報をメモすると便利。
だけど 2014/5/28 現在、iPhoneのGoogleMap公式アプリはマイマップにまともに対応してない。現在地の近くにあるポイントだけが、マイメニューのごく狭い領域にテキストで表示されるだけ。地図で、どのあたりに行きたいポイントがあるかざっと見たいし、旅行の時なんかはそれを元に移動ルートを考えたい。
ネットで探せばすぐ見つかるかと思ったけど、古い情報ばっかでまともに使えるものがほとんどない。GoogleMapsEngineになってマイマップの仕様が変わったこともあると思う。いくつか試してみた。
My Maps Editor（無料）
昔は使えたようだが、今ではログインしても404というエラーメッセージが表示されて読み込めなかった。自分の環境のせいだろうか？
GMapTools（無料）
見れる。旧マイマップ形式にも対応している。ただ、広告が入り、地図領域が狭い。リストも画面の一部を中途半端な高さで締めるため見づらいと感じた。リストがサイドバーや別ビューだったら使っていたかもしれない。おしい。
AssistMaps（無料）
自分でマッピングする機能が充実しておりよさげだったが、マイマップとの連携機能は将来的に実装とのこと（くどいけど 2014/5/28現在）で残念。
MapsEngine（有料：購入時￥300）
さすが有料アプリだけ合ってばっちり。旧マップ形式には対応していないが、マップごとにレイヤー表示ができ、デザインもシンプル。読み込み速度もなかなかで、これがベスト！無料で考えてたのでちょっと残念だけど￥300なら悪くない。
