Monthly Archives: June 2014

Update!

JavaScript:プロトタイプチェーン詳解!prototype と __proto__ について

prototype や __proto__ それぞれを詳しく説明しているものは存在しますが、この2つの違いを明確にまとめている情報があまりありませんでした。 そこでプロトタイプベースとはどういうことなのか、コード上に登場する prototype や __proto__ とは一体何なのかを自分なりに整理してみました。 更新履歴 [2017.06.03] コンテンツ修正しました。sititou70様、ご指摘いただき有難うございました。 [2014.07.19] コンテンツ修正しました。通りすがり様、ご指摘いただき有難うございました。 プロトタイプ JavaScript は「プロトタイプベース」のオブジェクト指向言語です。 まず最初にこの「プロトタイプベース」のオブジェクト指向とはいったい何なのか、クラスベースのオブジェクト指向と比較してみました。 クラスベース オブジェクトの雛形として必ずクラスが存在し、クラスをインスタンス化することでオブジェクトが生成される。 プロトタイプベース オブジェクトは既存のオブジェクトを元(プロトタイプ)とし、ユニークな特徴を付加することで存在する。 JavaScript はクラスを定義しなくても、新しいオブジェクトを生成したときには、すでに別のオブジェクトを元に生成されているということなのですね。 そして、この元こそがプロトタイプであると言うことがわかります。 プロトタイプ と [[Prototype]] と prototype プロトタイプ は仕様上の 概念 であって、実装時に定義したり参照できるものではありません。その概念を [[Prototype]] 内部プロパティである prototype や __proto__ により実現されています。 よって、全てのオブジェクトは内部プロパティ[[Prototype]]を持つということになります。 prototypeとは JavaScript の function 式で生成されるオブジェクトには prototype というプロパティを持っています。これがプロトタイプの正体です。 全てのオブジェクトが持つプロパティfunction式で生成されるオブジェクトが持つプロパティ(※1) prototype プロパティには何らかのオブジェクトが格納されている ※1 [2014.07.13](修正) prototypeは関数が生成されるときに自動的に作られ、{constructor:ownFunction}が入れられるプロパティで、普通のオブジェクトは持ちません。 次のサンプルコードでは Sample という関数(コンストラクタ)を定義し、Sample の prototype へ a プロパティを定義し、そこへ文字列 a を代入しています。 サンプルコード 結果 Sample のインスタンスである sample_obj 生成し、インスタンスから a プロパティにアクセスすると、prototype で定義した a の値が暗黙の参照により出力されます。 prototype(プロトタイプ)まとめ プロトタイプは概念上の言葉で、 prototype というオブジェクトのプロパティにより実現されている。 プロトタイプチェーン JavaScript がオブジェクト指向言語でありながら、クラスベースの言語と比較して、オブジェクトの型を意識しなくても何となく動いてしまう理由は、インスタンスが暗黙の参照により、オブジェクトが持つプロパティ prototype 順に辿っていくためです。(※2)このことをプロトタイプチェーンと呼びます。 ※2 [2014.07.19](加筆) チェーンが辿るのは [[Prototype]] であり、親の prototype プロパティとは直接関係ありませんが、new演算子が親の prototype プロパティを子の [[Prototype]] に設定するようになっているため、全てのオブジェクトはどんな名前のプロパティであっても [[Prototype]] に適応され得ます。 プロトタイプチェーンについては以下のサンプルコードをみれば分かりやすいと思います。 サンプルコード 結果 SampleA という関数(コンストラクタ)を定義し、SampleA の prototype に対し a というプロパティを定義し、文字列 a を代入しています。 続いて SampleB を定義、その prototype に SampleA のインスタンスを代入します。 最後に SampleB のインスタンス sample を生成し、インスタンスから SampleA で定義した a プロパティにアクセスすると 文字列 a が出力されました。 この例ではプロトタイプチェーンにより、JavaScript でもクラスベース言語のように SampleB が SampleA を継承していることが分かります。 プロトタイプは次のような経路で探索していきます。 プロトタイプチェーンの経路 現在のインスタンスのプロパティを調べる インスタンス元のオブジェクトのプロトタイプを調べる(上位のオブジェクトがある場合は継承の頂点まで繰り返す) 継承ツリーの頂点 Object.prototype を調べる Object.prototype で見つからない場合は undefined を返す(※3) サンプルコードでは以下の順にプロトタイプの探索が行われています。 sample_obj の prototype にプロパティ a があるか調べる -> なし SampleB の prototype にプロパティ a があるか調べる -> なし SampleA の prototype にプロパティ a があるか調べる -> あり(探索終了) プロトタイプチェーンまとめ prototype に定義したプロパティは、インスタンスから暗黙の参照により、継承ツリーの頂点である Object.prototype までを順に探索する。(※3) ※3 [2014.07.19](加筆) チェーンの末端は Object.prototype と決まっているわけではなく、厳密に言えば [[Prototype]] が null のときに探索が終了します。 prototype と __proto__ ここまででプロトタイプが仕様上の概念であること、prototype は関数オブジェクトのもつプロパティであることは理解出来ました。 それでは一体 __proto__ とは何でしょうか。 __proto__とは 全てのオブジェクトが持つプロパティObject.prototypeから継承されるアクセサメソッド(※4) __proto__ の値が null になるまでプロパティを探索していく Object.prototype の… 続きを読む

お知らせ:第2弾のiPhoneアプリ開発の経過報告(1)

今年4月中旬から開発を進めている sirochro 第2弾のiPhoneアプリ開発の経過を報告します。 第2弾iPhoneアプリ開発の経過報告 開発状況 現在 JavaScript のモック作成中です。 WWDC 2014 で Apple の全く新しい言語 Swift が登場しました。 タイミングがタイミングだけに、早速今回のアプリを Swift でコーディングしようかどうか検討しましたが、Swift で開発したアプリは App Store でリリースするためには 2014年秋まで待たなければいけないため、今回も Objective-C で開発を進めたいと思います。 ただし、JavaScript でのモック完成後実際にプレイしてみて、面白くなければリリースを見送る可能性があります。 開発進捗率 10% タスク JavaScript のモック制作(80%) Objective-C への移植作業(0%) エフェクト制作と実装(0%) レベルデザイン(0%) ベータ版完成(0%) デバッグ(0%) アプリの最終調整(0%) アプリの名称決定(0%) アイコン・グラフィック制作(30%) マニュアル作成(0%) ローカライズ(0%) App Store 資料作成(0%) アプリの申請(0%) sirochro.com プロモーション(0%) 開発中のiPhoneアプリの仕様詳細 アプリの名称 「sirochro無料ゲーム(仮称)」 アプリの概要 無料ゲームアプリで広告を表示。アプリ内課金はなし。ゲームのルールは説明不要かつシンプルなもので、効果・演出・レベルデザインにリソースを集中させる予定。 ローカライズ 英語版・日本語版の2か国語に対応予定。演出上、英語表記が適切だと判断している部分が多いため、ほぼ英語。 リリーススケジュール 2014年7月下旬にベータ版完成、8月上旬にアプリ申請、8月中旬リリースを予定。 まとめ ゲーム開発と並行して、5月から新しいプロジェクトをスタートしました。この新しいプロジェクトは世界中のデザイナー・デベロッパーの開発を支援するためのサービスとなります。このプロジェクトの詳細は別の機会に報告したいと思います。 また、今月中に sirochro.com のサイトデザイン変更とメンテナンスも実施予定です。そのためゲームアプリのリリース時期は少し遅れるかも知れません。。。 引き続きアプリ開発の進捗状況は sirochro.com で報告していきますのでお楽しみに。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple:WWDC2014 が開幕。 OS X 10.10 Yosemite と iOS 8, そして Swift の発表。

現地時間2日午前10時(日本時間3日午前2時)に アップルの開発者イベント WWDC (Worldwide Developer Conference) 2014 が開幕しました。 今回の WWDC の内容はその名の通り開発者に向けられた内容ばかりで、iPhone 6 や Mac mini 等のハードに関する発表は皆無でした。 OS X Yosemite 個人的に気になったものをピックアップしました。 OS X Yosemite(ヨセミテ) デザインを一新。iOS 7 と同じフラットデザイン。 背景色が半透明に。 アイコンもすっきり。 フォントのプロポーションも変更。 Notification Center ウィジェットが格納され、レイアウトがカスタマイズできるようになりました。ダッシュボード が Notification Center と統合、と言うことでしょうか。 Spotlight スポットライトの検索ウインドウが画面中央に表示され、ローカルのみならず Web 上の検索も可能。alfred のような挙動に。alfred 危うし。 「スシ」「ゴジラ」日本を意識したプレゼンテーションですね。今や日本は Apple にとって重要なマーケットであることが伺えます。 safari バーがシンプルに。 continuity Handoff iPhone で作成中のメッセージが Mac 上でも同期され、編集が可能。ここでも「カラオケ」というキーワードが登場。 Mac からの電話の発信・受信が可能に。Web 上の電話番号をタッチすればそのまま電話ができます。ここでまた「スシ」が登場。日本ゴリ押し。 先日 Apple が30億ドル(約3,000億円)で買収した beats の Dr. Dre も Apple の新入社員として電話で登場。 iCloud Drive DropBox のように Finder から iCloud のファイルにアクセス出来ます。 Spotlight の例といい、ある程度大規模なデベロッパーは Apple に買収されなければ、このように純正に取り込まれてしまう運命にあります。 Instant Hotspot パスワード入力なしで Mac 上から iPhone を経由しネットへの接続(テザリング)が可能。 リリース 開発者用のベータ版は本日からリリース。 2014年秋にリリース(無料)。 OS X 初のパブリックベータ版は夏にリリース。一般ユーザーもいち早く Yosemite に触れることが出来ます。 Yosemite まとめ UIデザインだけではなく、Mac、iPhone を意識することなくシームレスに連携が取れるようになりました。 iCloud もこれまでのフォトストリーム等の限られた用途だけでなく、クラウドストレージとしての役割が前面に出て、UX、ユーザビリティ共に飛躍的に向上している感じがしました。 iOS 8 グループチャット機能 LINE でおなじみのグループチャットが純正で対応しました。ここからさらにスタンプ機能を実装されると LINE の存在意義がなくなります。 ロケーションの交換・音声/ビデオメッセージがスムースに送信可能。これは便利。 QuickType 文脈の予測変換機能。手書き文字認識も実装。何故今までなかったのか。 日本語にも対応。日本語のサジェストにはユニークなロジックが必要だと思われますが、Apple は頑張ってくれました。 リリース 開発者用のベータ版は本日からリリース 2014年秋にリリース(無料) SDK Touch ID iPhone 6 が登場すれば、Touch ID もより一般化されるかと思いますが、その API が利用出来るようになります。 HealthKit と HomeKit 健康管理のHealthKit。 スマートホームのためのHomeKit。家電や照明のオンオフ、鍵のロック・アンロック等がアプリからオペレーション出来るようになります。 App Store 動画の掲載が可能に。 今年2月に買収した TestFlight により、ユーザーをベータテストに招待出来る機能も追加。ソーシャル課金ゲームには絶大な効果をもたらすのではないでしょうか。 最後にWWDCらしいすごいものが発表されました。Objective-C でも C でもない、新しいプログラミング言語の Swift です。 Swift Objective-C の障壁が高いことから、開発者の新規参入を促すために取り入れられた Swift というまったく新しい言語。特徴は以下の通り。 軽量かつ記述がシンプル 結果がリアルタイムに出力可能 Swift により開発されたアプリは App Store でのリリースが可能 従来の Objective-C コードも Swift なら・・・ こんなことに。 モダンな表現でとても魅力的なのですが、また覚え直しですか。。。 まとめ 今回の WWDC は随所に日本を意識したプレゼンテーションが目立ちました。 Mac OS X Yosemite も iOS 8 も以前のものと比べより洗練されています。これからはこの2つの OS を個別に考える事自体がナンセンスなのかもしれません。 今年の秋以降、これらの OS が実装されたハードウェアにより、QOL の向上に一役買ってくれることでしょう。いいものはどんどん使っていけばいいかと思います。 みなさんがお待ちかねの iPhone 6 や iWatch、Mac 等のハードウェアは WWDC 終了後、7月くらいに発表されると思われます。楽しみに待ちましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5&CSS3 16進数からRGBへの変換ツール

CSSのコーディング中に、16進数のカラーをRGBに変換したいときがあるので、自分用に変換ツールを作成しました。JavaScript のトップレベル関数 parseInt を使えば簡単に実装できました。 16進数からRGBへの変換ツール 16進数のカラーコードを入力して下さい。(入力例: #123, #1234ab, 567, 89abcd) 結果 RGB RGBa まとめ RGBから16進数への変換ツールもつくろうかと思ったのですが、今のところ不必要だったため見送ることにしました。必要になればまた別の機会に作成したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips:Google アナリティクス で自分のアクセスを除外する方法(2014年 最新版)

小規模なサイトやWebサービスのリリース直後でアクセス数が少ないうちは、アナリティクスの統計データは自分のアクセスだけで全体の数%を占めてしまいます。 そういった問題点を解決するために、Google Analytics で自身のアクセスを除外する方法を紹介します。 自分のアクセスを除外する方法 Google Analytics の自身のアクセスをカウントさせない方法は次の2つあります。 Google アナリティクス オプトアウト(アドオン)を使用する Google アナリティクスの設定からフィルタを作成する メリット・デメリット メリット デメリット オプトアウト 導入が簡単。 ブラウザやマシンごとにインストールする必要がある。 フィルタ 指定したIPアドレスからの全てのアクセスを一括で除外出来る。 やや導入に手間がかかる。 アクセスする場所が複数ある場合(会社・自宅等)は全てのIPアドレスを設定する必要がある。 どちらも一長一短なのですが、これら2つの方法はどれも最初に設定すればいいだけなので、両方とも実践しておくといいかと思います。 Google Analytics の自分のアクセスを除外する Google アナリティクス オプトアウトで除外する 公式サイトより Google アナリティクス オプトアウト をダウンロードし、インストールすれば完了。 ただし、アドオンはブラウザごとにインストールする必要があります。また、2台以上マシンを保有している場合も、全てのマシンのブラウザに対しアドオンをインストールしなければなりません。 除外したいIPアドレスが決まっている場合は、次のIPアドレス毎にフィルタを設定する方法をおすすめします。 IPアドレス毎にアクセスを除外する 【IPアドレスの調査】 まず自分のIPアドレスを調べないといけませんが、この場で表示出来るようにしました。これを使って設定を進めていきましょう。 あなたのIPアドレス [ipadress] 【Google アナリティクスにログイン】 Google アナリティクス にログインします。 【アナリティクス設定】 ヘッダーメニューから「アナリティクス設定」を選択します。 【新しいフィルタの作成】 フィルタを適用する「アカウント」をプルダウンメニューから選択し、「すべてのフィルタ」、「新しいフィルタ」をクリックします。 【フィルタの設定と保存】 適当な「フィルタ名」を記入し、フィルタの種類は「既定のフィルタ」にします。 ドロップダウンメニューではそれぞれ「除外」「IPアドレスからのトラフィック」「等しい」を選択し、最後に除外したい「IPアドレス」を入力します。 フィルタを適用したいビューを選択し「追加」、最後に「保存」をクリックすれば設定は完了です。 まとめ コンテンツさえしっかりしていればアクセス数は自然に伸びて来ますし、ユニークユーザー数がそれなりに増えれば、自身のアクセスは誤差程度で済むようになります。 しかし、サービスの方向性やプロモーションの方針を決定するためには、例え誤差程度であってもこれらの方法を実行し、正確な数値で検証することをオススメします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5/CSS3 グラデーションCSSコードの書き出しツール

ネット上には優秀なグラデーション生成ツールはあるのですが、16進数の2値から単純なグラデーションのCSSコードを出力するだけのツールが欲しかったので、自分用に作成しました。 グラデーションCSSコードの書き出しツール カラー、グラデーションの描画方向、開始〜終了位置(%)を入力後「出力する」をクリックして下さい。 カラー1 : #  カラー2 : #  方向 :  縦方向   横方向 範囲 :  % 〜  % 結果 まとめ ベンダープレフィックスがなくなれば、こういったツールも必要ないのですが、もうしばらくの辛抱ですね。