JavaScript

The Blocks of the Dead: Objective-CのBlocks構文をひたすらタイプして覚えよう

「そろそろObjective-CのBlocks構文をスラスラ打てるようになりたい!」と思って作ってみた。
空白の扱いとかもうちょい改善したいところはあるけど。ひとまず動くようになったので公開。

The Blocks of the Dead

blocks_play

tnantoka/blocks

名前はセガの名作からパクりました。
「The Typing of the Blocks」じゃないのは、Blocks構文のややこしさにふさわしい”Dead”を残したかったから。

参考サイトはHow Do I Declare A Block in Objective-C?です。
(オリジナルはURLがよろしくないwordなので、公式のミラーサイトへリンクしてます。)

はじめてのAngularJS

以下Objective-CではなくJSの話。


AngularJSアプリケーション開発ガイド

を読んだので、AngularJSでやってみました。
(というか、AngularJSの勉強のために作った感じ。)

今までBackbone.jsしか使ったことがなかったので、初Angualrです。

Angularの方がいろいろ書き方が決まってたり、テストの仕組みまで揃ってたり、至れり尽くせりな印象を持ちました。

Backbone.jsは、Backboneで提供されるModelやViewを継承することは決まってるけど、その先は結構自由で、設計力が試されるイメージ。
※ 何も考えないとrender()がやばいことになったり

僕みたいなへっぽこには、Angularのガチガチ感が心地よかったです。Rails Way的な。
もうどうせならモデルの仕組みまで用意してくれたらいいのに、とも思ったり^^
(最近フレームワークに頼りすぎて、自分で1からクラス的なもの書かないからちょっとテンパったorz)

あと、公式で用意されてるangular-seedがコンパクトで良いテンプレートでした。(Gruntなし。NPMとBowerで管理。)Yeomanが生成するやつはちょっといろいろ入りすぎてウッってなるので…。

次もAngularでなんか作ってみようと思う。
HTML5 Japan Cupなんておもしろいものが開催されてるらしいから、何か応募してみようかなぁ。

ChromeのデベロッパーツールでFirebugの持続

Firefoxの半分はFirebugでできていると思っています。
いや、ほんとにFirebugがなければ僕のメインブラウザはとっくにSafariがChromeになっていたことでしょう。

そんなFIrebugの機能の中でわりとお世話になるのが「持続」。
画面遷移した後もJSのエラーログなどをクリアせずに残してくれます。

例えば、”イベントハンドラ内でreturn falseする”ことでクリックイベントをキャンセルしているような、行儀の悪い(※)ライブラリの内部でエラーが起きて、予期せぬページ遷移が発生した時。この機能が犯人探しに役立ちます。
※ preventDefault()を使いましょう。return falseだとそこに辿り着くまでにJSエラー起きたらイベントキャンセルされないですよ!

というわけで、普段はFirefoxで開発しているんですが、今回Chromeだけで発生するややこしめのエラーに遭遇したので、デベロッパーツールでデバッグするはめになった。
で、よく考えると持続の仕方がわからなかったのでメモ。

1. 右下の設定(ギア)アイコンをクリック

chrome_devtool_keep_1

2. Preserve log upon navigation をチェック。

chrome_devtool_keep_2

 

たったこれだけ。知っていれば簡単。
ただ、Firebugと比べると切り替えるのが面倒だ…。

このブログの”フロントエンドSPOF”を測ってみた

金融システムに関わっていたこともあり、SPOF(単一障害点。その一箇所がダメになったら全体が止まっちゃうような箇所。クリティカルなシステムではこれをなくすために必死で頑張る)という言葉は嫌という程聞いてきたんだけど、フロントエンド〜という言葉はこの記事を読むまでは知らなかった。

3rdパーティー製スクリプトによるフロントエンドSPOFを検出するChrome拡張 | ゆっくりと… 

概念としてはもちろん知ってたけど、個人サイトであんま意識したこともなかったし、良い機会なので上記ブログで紹介されてたChrome拡張で調べてみた。

すると案の定、

ダメダメでしたorz
(拡張の機能で試しに外部スクリプトの読み込みを遅延させてみると見事に真っ白!)

対策しよう!


早速何とかしようと、scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと… を読んでscriptのdefer属性、async属性を改めてお勉強。

deferはscriptの読み込みを後回しにして順番通り実行(実装依存?)、asyncは順序関係なく完全非同期という感じ。
単純に属性をつければいいかというと、そんな美味しい話はなく、scriptの中でdocument.writeとか使ってる場合には使えない。(後回しにできないので当たり前か)

対策断念…


今回検出された5つのスクリプトがdefer/async付与による対策ができるか確認してみる。

まず、Google plus、Adsence、Grow!ボタンはdocument.writeを使ってるのでNG。
そして残りはIE9.jsとhtml5.jsという、いずれもhead内で先に実行しときたいんじゃないかというもの。

うーん、対策できそうなやつないな^^

まぁGoogleが落ちることはそうないだろうし、Grow!については最後のほうで読んでるので影響も少ないし、とりあえずはよしとするか…。

16進数表記のRGBをUIColorに変換するやっつけツール

Objective-Cで色を指定する時、”#rrggbb”な指定をすることができません。
XCodeのIBやStoryBoardから指定する時もそういうUIはないようです。

DigitalColor Meterからも16進数表示は消えたし、どうやらアップルさんはこの一般的にはわかりづらい表記をMac上から消し去りたいようにみえます。

しかし、僕らWebな開発者としては慣れた16進表記でどうしても考えてしまいますし、
この形式の方がデザイナーさんとのやりとりもスムーズだったりします。

そんな感じで結局iPhoneアプリの開発中に、脳内変換するシーンに結構出くわすことになり、大変面倒です。
というわけで、iTunes Connectがメンテに入ってやることがなくなってしまった暇つぶしに、やっつけ変換ツールをJSで作ってみました。

HexRGB To UIColor

Firefox/Chromeの最新版で動作確認してるので、モダンブラウザならたぶん動くはずです。
自分が使っていて不満が出てくれば直します。

実はUIColorで普通に16進表記が使えるっていうオチだったら泣きます。

 Scroll to top