はじめてRuby gemを作った時のメモ

-

できたもの

Rubyrubi

Riot+Gulp+Browserifyで時計サンプルを動かす

-

RiotはReactライクなマイクロMVPライブラリです。タスクランナーを噛ませたいのでこちらのサンプルを動くようにしたり、いろいろいじってみた。

時計を表示するclockタグを表示します。インスタンスごとに長針・短針・秒針の表示を変えています。マウスホバーでポーズします。

via Adding compiled Riot tags to your Gulp + Browserify build

ES6+Karma+Jasmine環境のテンプレート

-

ちょっとしたES6スクリプトをテスト付きでさくっと試すためのテンプレを作りました。

テストランナーはKarma、テスト本体はJasmineです。

はじめてpackage.jsonとかreadmeまじめに書きました。

https://github.com/110chang/babel-starter

新年明けましておめでとうございます。

-

2016年もよろしくお願いします。

2016-monkey

Reactのチュートリアル+Express+MongoDB

-

Reactのチュートリアルを触ったのですが、バックエンドがないとPOSTできないのでつまらない。ExpressとMongoDBを追加して動くようにしてみました。

タスクランナーは普段はGruntなのですがGulpを使ってみました。 Livereloadの代わりにBrowserSyncを導入してみました。

https://github.com/110chang/react-express-mongodb

fig-react-express-mongodb

ウェブサイトのテキストを雪のように降らすウェブアプリCSSnowflakes

-
CSSnowflakes
CSSnowflakes

※Android未対応、IE未確認

フォームにどこかのURLを入れてプレイボタンを押すと、サイトを取得してYahoo!の日本語形態素解析APIに渡し、その結果を雪のように降らせます。ただし、形態素解析は100KBの制限があります。

Knockout.jsと東京メトロAPIで出入口検索アプリを作りました

-

案件でKnockout.jsを触って感触が良かったので何か公開できるものを考えました。

以前、東京メトロAPIのアプリコンテストに応募して残念ながら落選したのですが、API自体はありがたいことに継続して運用されているので、現在地や出先の住所から一番近い東京メトロの出入口を検索するアプリを作ることにしました。

Dokokara.info どこから(東京メトロの駅に)入るのが近いかわかるアプリ

dokokara.info
イントロダクション
dokokara.info - find exit of Tokyo Metro
出入口検索
dokokara.info - find route
ルート検索

今年から記帳→確定申告をウェブで完結させたい

-

昨年までの状況

昨年(つまり今回の確定申告)まではやよいの青色申告のWindows版ソフトを使っていました。ただ、ソフトの操作性はいまいちで、記帳自体はGoogle スプレッドシートに入力し、確定申告するときに、それをインポートして申告書類の生成ツールとして使っていました。

そのやよいの青色申告がオンライン化しまして、初年度無料ですし使うつもりでいました。確定申告の提出準備も終わり、一応、他の選択肢も見ておこうと思って、よく話題にのぼるfreeeを試してみたのです。ちょっと試したかっただけなのですが…

物理エンジンは電気羊の夢を見るか?

-

あけましておめでとうございます。
2015年も、よろしくおねがいします。

遊びで、JavaScriptの物理エンジンMatter.jsを使って羊を降らせてみました。

A Happy New Year 2015!  110chang.com

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

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

-

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章のおやつの例が気に入ったのでゴリっと作りました。