カテゴリー別アーカイブ: プログラミング

jQueryとAngularJSにおけるAjaxの微妙な違い

AngularJS の勉強、始めました。

最初はそのプログラミングに関する独特のお約束事項にイラッとしましたが、キモであろう DI を「疎な関係のクラスを(実行時に)結びつけるのに必要な仕組み」と割り切り、DI – 猿でも分かる! Dependency Injection: 依存性の注入 で引用されている ITpro 記事クラス図 をコードから想像できるようになったところで、それなりに面白くなってきました。

何より「jQuery が要らなくなる!」のがとっても快感なんです 😉 (つらい時もあるけど…)。

さて今回は、jQuery まみれのページを AngularJS で書き換えた時に気付いた Ajax の動作 − 非同期通信の戻り値をいつどこで DOM に反映するか − に関する話題を書いてみます。

続きを読む

ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得

zenback の読み込みコードが非同期化され、かつ 平均20%+の速度アップが図られた そうで、ユーザーとしては嬉しい限りです。

zenback に限らずソーシャルメディアの導入は、必然的に外部サービスを多用することになります。どのサービスも、スクリプトや画像、トラッキング用コードなどのリソースを、その特性に合わせて 2〜4 程度のホスト/ドメインに分散させているのが普通です。

こういった分散化は並列に読み込みめるリソース数を増やし、クッキーのあり/なしを区別できるので高速化に寄与します。が、利用するサービス数が多くなると、いわゆる「DNS ルックアップ」にかかる時間が無視できなくなり、さすがにデメリットの方が目立ってきます。

例えば本サイトの場合、最終的に25以上の異なるホスト/ドメインから 有象無象 のリソースを読み込んでいるのですが、「DNS ルックアップ」の合計だけで1秒を超えることなどザラにあることが分かりました。

今まで「大して効果ないんじゃない?」と「DNS プリフェッチ」の導入は見送っていましたが、この1秒を消し去ってくれれば幸せになれるかも…と思い直し、導入することにしました。

ということで、今回は twitter や facebook などのソーシャルボタンに DNS プリフェッチを導入した時の効果を報告したいと思います。

続きを読む

WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ

ここ最近、jekyll に関する記事を目にする事が多くなりました。

以前から WordPress でオリジナルなブログを作ってみたいと思いながらも、なかなか重い腰が上がらなかった私が、なんとなく jekyll でブログを作り始めてみたら、以外にオモシロかった、という話をまとめてみたいと思います。

本来生まれも育ちも違う、WordPress と jekyll を比べる こと自体はナンセンスなので、jekyll でどこまでできるかが本記事のメイン・テーマです。

大抵は 「ブログなら、最低このぐらいの機能が欲しいよネ」 というのがあると思います。例えば、私も使っている Octopress では、カテゴリとタグを使い分けることが出来ません。またカテゴリを階層化したい人もいるでしょう。「続きを読む」的な機能だって、欲しいですよネ。

一方海外では、「WordPress から jekyll に乗り換えました!」 的な記事を目にすることも多く、jekyll はある面で、他の CMS にない魅力を持っているのも事実だと思います。

そこで今回は、「PHP は飽きたんで、Ruby でも始めてみようか」 的な人や、「WordPress でデザイン・テンプレートを作ってみたいんだけど…」 的な人を jekyll に引き込むことを目標に、そのポイントと魅力、およびブログ構築に必要な実際の作り込みについての情報を中心に、話を展開してみたいと思います。

また GitHub に、Twitter Bootstrap を使ったレスポンシブな 実験的テンプレートサンプル も公開しましたので、合わせて参考にしてください。

続きを読む

やっと理解できた!JSオブジェクト指向プログラミング再入門

既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど!」 っていう、頭の中のスイッチがパチンッ!と入るような境地には達していませんでした。

かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.callFunction.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。

そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 JavaScript 入門 は、オブジェクト指向の概念と JavaScript のプログラミング言語仕様をほどよくバランスさせながらも、「JavaScript のオブジェクト指向プログラミングはこうだ!」っていう大胆な書きっぷりが、私的にはスイッチが入ったのでした。

もちろんこの記事に目を留めてもらった人と私のバックグランド (仕事上は組み込み系の C → UML → C++ です) は違いますし、また優れた解説記事が多数ある中、私がこの記事を共有する価値があるのかどうか分かりません。が、私のように クラス に馴染んだ人間に教える良い方法でもあると思ったので、翻訳を中心に、その 感じ を伝えるチャレンジを再度してみたいと思います 😉 。

続きを読む

実践GitHub Pages運用のユースケースとワークフローの詳細

GitHub Pages Workflow

前回、GitHub Pages 活用の概要を書きましたが、実際に運用していくと、mastergh-pages をどう使い分けるか、また両者の同期をどう行うかなど、いくつかの課題が浮かび上がってくると思います。

そこで今回は、実際に GitHub Pages 上で運用されている Dive Into HTML5 をよく知る立場から書かれた記事 「GitHub Pages Workflow and deleting git’s `master` branch – Oli.jp」 の翻訳を中心に、関連するいくつかの記事から、ユースケースと運用のシナリオ、及びそれに応じたワークフローをまとめてみました。

以下は、その参考記事です。

  1. Git post-commit hook to keep master and gh-pages branch in sync by Paul Irish
  2. 2011年10月13日 Easily keep gh-pages in sync with master | Lea Verou
  3. 2011年10月13日 Quick tip: git checkout specific files from another branch
  4. 2011年10月14日 GitHub Pages Workflow and deleting git’s master branch – Oli.jp
  5. 2011年11月29日 Ryan Fitzer » Easy Syncing of GitHub Pages

これらの記事は、書かれた日付が近いのもそうですが、相互に参照したり、コメント欄で議論したりしていますので、それらをトラッキングしながら私なりの注釈も加えていきたいと思います 😀 。

ちなみに GitHub Pages には、ユーザーページとプロジェクトページの2種類があることは前回説明した通りです。前者は基本的に master ブランチのみを管理すれば良いので、本記事では、mastergh-pages の2つのブランチを管理しなければならない後者を主な対象としています。
続きを読む

GitHub Pagesホスティングサービス(ほぼ)完全活用ガイド

GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。

ただ、同種サービスの Google CodeBitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクトの成果を世界にアピールする − GitHub Pages は、そんなことのできるサービスです。

2008年12月の GitHub Blog の記事 には、次のような GitHub Pages の紹介があります。

You can put anything here you like. Use it as a customizable home for your Git repos. Create a blog and spread your ideas. Whatever you want!
(GitHub Pages 上にはお好みで何でも置くことができます。Git リポジトリのホームページとしてカスタマイズしても良し、ブログを設置してあなたのアイディアを広げても良し。あなた次第です!)

ということで今回は、この GitHub ページの活用方法をまとめてみたいと思います。

目次

  1. GitHub Pagesの概要
  2. かんたん、カッコいいGitHub Pagesの作り方
  3. GitHub Pagesプロジェクト・ギャラリー

続きを読む

脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術

GitHub README

README がキチッと書かれているプロジェクトって、どんなに小さくても立派に見えますよネ。

GitHub の場合、大抵はマークダウン記法で書かれた README.md とか README.markdown とかいう名前のファイルが、HTML に変換 (マークアップ) されて表示されていることはご存知でしょう。

マークダウン記法自体はとても簡単なのですが、GitHub では GitHub Flavored Markdown (略して GFM) という GitHub 用にアレンジされたマークダウン・エンジンが採用されていて、一般のマークダウン・エディタでチェックしてからコミットしても、意図通りの見た目にならないことが多々あります。私 (もちろん GitHub 初心者です!) の場合、README ファイルだけで10回以上もコミットしてしまいました。「マークアップ (レンダリング) を気にして書くマークダウン」 なんて、何ともナンセンスですよネ。

ということで、私の二の舞にならないよう、スマートに README ファイルをコミットする方法を共有してみたいと思います。
続きを読む

jsdo.itの最新マイコードをブログに流すjQueryプラグインdoticker.js

Twitter 公式のプロフィールウィジェット のように、jsdo.it で公開したコードをブログでプチ紹介してくれるティッカーのようなものがあればなぁと思い立ち、作りましたので公開したいと思います。Twitter の JavaScript は、スタンドアロンで動作するようにできていますが、そのソースコードを jsbeautifier などで整形すると2000行近くもあり、こんなプログラミングは私にはとても無理です。そこでお手軽に jQuery のプラグインとています。

ほとんど jQuery バージョン 1.0 のルーチンを使っているので、古い jQuery でも動くと思います (1.3.2 までは動作することを確認をしています)。

ブラウザは、IE6 〜 8 (IETesterで)、IE9、Firefox 7、Chrome 15 (いつの間に!)、Safari 5 での動作を確認済みです。

プラグイン本体は、GitHub に上げました (MIT ライセンス)。良かったら使ってやって下さい。またバグなどの報告は、issues に挙げてもらうと助かります。

また、デモを jsdo.it に上げてありますので、ご覧ください。本記事では、使い方、オプションの解説と共に、ほんの少し中身についても書いておきますので、カスタマイズの参考にでもして下さい。
続きを読む

jQueryのDeferredとPromiseで応答性の良いアプリをー実践編

前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと/何がうれしくて/どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。

今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに Resultタブ タブや 矢印タブ をクリックせずに、プラスタブ タブで別窓を開き、テストが終わったら窓を閉じてから次の例題に移ると良いかと思います 😉 。
続きを読む

jQueryのDeferredとPromiseで応答性の良いアプリをー基本編

jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。

記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。

DeferredPromise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです 😉 。
続きを読む