Archived
110

Archive for 2014

Google Analyticsに残る不審なリファラー〜Co.lumb問題

なんとなくGoogle Analytics見ていたら、アクティブなページに“Co.lumb”という見覚えのないタイトルが出現しました。URLは/つまりトップページです。このサイトのトップページのタイトルは“110chang.com”ですから、これはおかしいです。

iMac 5K買ったのでアプリとか環境メモ

iMac 5Kを買ってしまいました。自家用にデスクトップ機を買うのは人生で初めて。

Retina自体はすでにiPhoneやiPadで見ているので、特段の驚きはないです(綺麗なのは間違いないですけどね)。

almond.jsでRequireJSのbuildファイルからからAMDを取り除く

RequireJSは使わないでほしいなどと、悲しいことは言われなくなる。といいのですが。

almond.js

東京メトロAPIのアプリコンテストに応募しました

東京メトロ列車位置情報アプリmetloc

コンテストの公式サイト

※一部ブラウザに最適化できていません。アクセスする前に注意事項をご覧ください。

metloc  東京メトロ列車位置情報アプリ
列車の詳細情報の様子
metloc  東京メトロ列車位置情報アプリ
遅延が発生している様子

Windows8にやよいの青色申告をインストールする時のメモ

いくつもの罠にひっかかった。もういやずら。

デバイスラボ(レスポンシブ開発用デバイスホルダー)を作ってみた

デバイスラボという名称は商品名なのですが、今のところ、世にふさわしい言葉がないのでとりあえずデバイスラボと呼んでみました。

IMG_1474

この10年ぐらいの環境の変化とか

はじめてのブログ

このブログは2005年頃、ロリポブログとして始めたのですが、すぐにMovableTypeブームがやってきてMovableTypeで構築した独自ブログに乗り換えました。

MovableTypeのテンプレート言語はHTMLタグ形式だったのでわりかし楽に導入できました。このころはとにかく何でもブログに書いていましたね・・Perl製なので、トラブると解決するのが大変でしたが、とにかくわからないことは何でもネットで調べて、恐ろしいことに仕事でも使っていました。サーバー側の勉強にはすごくなったと思います。

MovableTypeからWordPressへ

当時CMSでMovableTypeと人気を2分していたのがWordPressです。 MovableTypeには

  • HTMLタグ形式で複雑なロジックの記述するのは無理がある
  • 記事が大量になると静的ページを吐き出すための「再構築」に異常に時間がかかる(サーバーのスペックにもよる)
  • 「再構築」に異常に時間がかかるとロジックの確認も異常に時間がかかる

といった問題があり、MovableType自体がエンタープライズ製品へ舵を切り始めたのもあって、業務でもWordPressを使うことが多くなり、このブログもWordpressに移行しました。

PHPで動くのでテンプレートの記述も簡単で、Mac用のローカル環境であるMAMP上ですぐに動かすことができるのでその点でも重宝しました。

制作環境の変化

デザイン業務のデファクトスタンダードがAdobe製品であるように、HTMLコーディングの世界でもAdobeのDreamweaverがずっとデファクトスタンダードでした。

僕も例に漏れずDreamweaverを使っていたわけですが、グラフィック製品の流れをくんでいるからなのかGUI重視で、画面いっぱいに広がったパネルに所狭しと機能が詰め込まれており、とても鈍重なソフトで、よく落ちました。というかDreamweaverはある意味グラフィックソフトなのかもしれません。

Dreamweaverで必ず使っていたのが「テンプレート」機能です。サイトの共通部分(ヘッダ、フッタ、サイドバー)を一括管理でき、ある程度以上の規模のコーディングには必須でした。

2012年頃から、CodaやSublimeTextなどの軽量エディタが人気を集め始め、僕も移行のチャンスを狙っていましたが、この「テンプレート」機能がネックでした。

CakePHP、FuelPHPなどのフレームワークを触ってみたりしましたが結局身にはつかず(まあ、そもそも目的が違う訳ですが)、生のPHPで無理矢理自作したりしていました。

Middleman、Gitの導入

現在の環境は、ここでも何回か書いていますがRuby製の静的サイトジェネレーター、Middlemanです。

また、Gitを導入し活用しています。1人作業でバージョン管理する必要はないと言えばないのですが

  • 差分を取り出しやすい
  • リモートにプッシュしておくことでバックアップになる
  • 作業のまとまりを意識するようになる

といったメリットがあります。 あと、本来の趣旨ではないですが、きれいなグラフが書けるとうれしい、というのもあります。

ブログをリニューアルしました

Middlemanにはmiddleman-blogという付属のgemがあるので、これを使ってリニューアルを行いました。日付アーカイブや、タグ、ページネーションといったブログの基本機能が備わっており、markdownファイル自体が記事となります。確認はローカルでできますし、変更はLive Reloadですぐ反映されます。テンプレートはもちろんSlim+SASSで超速で書けます。

IE8でRespond.jsのブレークポイントが違う

私も最近はレスポンシブ案件を受けることも多くなってきていまして、レガシーIEに対応する際は個人的な経験からRespond.jsを使用しています。(masonry.jsを実験した時にcss3-mediaqueries.jsは問題があった)

PCサイズの時だけにjQueryのプラグインを適用したい、といった状況で、ブレークポイントに合わせてJavaScriptを発火する必要があったのですが、どうもIE8だけブレークポイントが違っているので調べてみました。

RequireJSのコンパイルとMiddlemanのbuildをGruntにやらせる

Middlemanにはアセットパイプラインという便利な機能があるのですが、名前空間の管理のことを考えると取っ付く勇気がありません。

RequireJSはそこらへん考えずにファイルを分けて好きなようにディレクトリに放り込んでおくだけでいいので、このラクチンさはやめられません。

で、いままではコンパイルをr.jsで行っていたのですがこれをもっとラクにするために、耳に聞こえしGruntという便利なものを使ってみました。

MiddlemanでCSVからtableを作成

CSVをYAMLに変換してローカルデータを使ってtableを作成とか回り道してましたが直接CSVも扱えることに気づいた。。

WebWorkerと遺伝的アルゴリズムでウェブアプリ的なもの

きんどるでついポチッとしてしまった「マッチ箱の脳」という一般向けの人工知能の入門書を読んでみたところ、第1章のおやつの例が気に入ったのでゴリっと作りました。

MiddlemanのbuildディレクトリをGitでサーバーにデプロイする

Gitを使えるようになりたいので 自分のサイトをGitで管理したいと思いまして。

Angular.jsを試してみる〜JSONを取得して何かする

Angular.jsを使えるだけ使ってみようと思い、 結果として拙作の鉄道運行情報からJSONひろって表示するだけのサービスを作った。

関東地方鉄道運行情報 with Angular.js

【脱Dreamweaver】Middleman導入メモ

MiddlemanはRuby製静的サイトジェネレータ メタ言語サポートで高速コーディング(できるはず)compassも同梱 ライブリロード(Ctrl+Rとかしなくてよい)

JavaScriptでさまざまなソートアルゴリズム

ソートアルゴリズムの視覚化って面白いですよね。 見るたびに一度書いてみたいと思っていました。