一索

クジャクは夜にプログラミングします

ガラポンTVを買ったけど、APIサンプルでハマった話

ガラポンTVを買いました。「全チャンネル録画して生活を変えたい!」みたいなモチベーションではなく、「ウェブAPIが付いているHDDレコーダーこれしかねえ!」という感じで買ってみました。昨日セットアップしてから、テレビ見るよりも各種APIを叩くことばっかやっています。面白いAPI欲しいお金がある人は買えばいいんじゃないのかな、と思ったり。

さて、APIを動かす前に色々試すと思いますが、ガラポンTV開発者向けページには注意が必要です。DEV_IDを置き換えたのに動かねえ!という話です。sample_gtvlogin.phpは実は57行目もURL書き換える必要があります。先頭でdefineとかで定義して欲しかったです……。あと、98行目で四・参号機の判定をしていますが、四号機はGTV4が返ってきます。とりあえず動かすために104行目の正規表現を[34]とする必要があります。

でも、これだけで動きます。今はRubyでうまくAPI叩くgem作っています。

kaminariをRails.cacheする方法

こばやんさんになるべくブログ書いた方がいいと言われたので書くことにしました。

kaminariのオブジェクトをキャッシュするのに以下のようなコードを書くことを考えますが、動作しません。

@items = Rails.cache.fetch("items/#{params[:page]}", expires_in: 1.hour) do
  Item.page(params[:page])
end

これはMarshal.dumpできないためで、Kaminari::PaginatableArrayを使うことがKaminari and Low Level Caching Issue ? Marshalling error, can't dump anonymous class · Issue #293 · amatsuda/kaminari · GitHubで示されていますが、これはpaginate_array() with total_count as option returns whole array for every page. · Issue #516 · amatsuda/kaminari · GitHubの修正のため動作しなくなっています。

現在、これを実現するには以下のようにpaddingを使うと良さそうです。

@items = Rails.cache.fetch("items/#{params[:page]}", expires_in: 1.hour) do
  items = Item.page(params[:page])
  Kaminari.paginate_array(items.to_a, limit: items.limit_value, offset: 0, total_count: items.total_count, padding: -items.offset_value)
end

以上です。

CSS Refactor(仮)を作りました。

CSSリファクタリングするツールを自作のCSSパーサーを窓から投げ捨てて作りました。超チューニング祭の反省会その1って感じです(多分CSS Spriteがその2に続く)。

このツールは、HTMLファイルを指定するとそのファイルが読み込んでいるCSSを調べて、全てのHTMLで使われていないセレクタやプロパティを削除してCSS上書きします。

超チューニング祭のCSSだと、猫の日セレクターを消し去ったり、上書きされまくっているgradientを消し去ったりを全部やってくれます。

注意点

  • 上書きします。dry runは作っていません。
    • オリジナルのファイルがgit管理下にある場所で使うだろう、という考えで現在こうなっています。
  • HTMLに記述されていないJSから動的に使われるクラスは消えます。
    • これは対応が厳しい。
  • テストとか無い、プロトタイプな実装です……。
    • 当分npmとかに登録するつもりはないです。

使い方

まだ、npmに登録したりはしていないので、git cloneで取得し、binディレクトリにパスを通し、css-refactor *.htmlみたいな感じでコマンドを実行してください。

$ git clone https://github.com/ylqjk/css-refactor.git ~/css-refactor
$ echo 'export PATH="$HOME/css-refactor/bin:$PATH"' >> ~/.bash_profile
$ css-refactor refactoring-site/*.html

超チューニング祭のCSSとかかなり綺麗になります。

主な未実装な機能

  • @import, styleタグへの対応。
    • linkタグのみ。外部ホストのものも未対応。
  • 省略系プロパティで使われているかの判定。
  • 擬似クラス、擬似要素のプロパティの最適化。
  • 使っていないkeyframesなどの削除。

反省点

普通に三時間ほどで作れました……(いらないセレクターの削除だけなら三十分ほどです)。既存のライブラリをうまく組み合わせることをそろそろ憶えたほうが良いと思いました。バグっていた自作CSSパーサーはお蔵入りしました。

超チューニング祭に参加しました

超チューニング祭に参加しました。ニコニコ超会議でフロントエンドのハッカソンをやる感じのイベントです。

結果

ごくごく普通な結果です。どういう経緯でこうなったかはLTで話したのですが、

  • 自動で全部チューニングするのがカッコイイ!
  • CSSがカオスでCSS関連の便利自作ツール(無駄セレクタ、無駄ルール消去とかCSS Sprite変換とか)動かねー
  • 手作業で頑張ろう……
    • CSS Spriteは辛いからもういいや
  • やることないから、UIちょっと改造しよう

という感じの話でした。スライドは以下ですが緊張しながらもなんとか喋れて良かったです。トークソンで練習した成果が出たのかもしれません。再来週、このトークソンの第五回が開かれます。興味ある方は是非!(まだ、僕は予定がわからないけど)


反省

やはり自作ツールが動かなかったのが悲しかったです。CSSのパースを適当にやっていたのが原因で、忘れないうちにパースできなかった箇条書きしておくと、

  • セレクターの中とかに出現したコメント
  • @mediaやCSSアニメーションのkeyframesなど括弧が入れ子になる構文
  • 文法違反の構文が出てきたときの挙動

辺りが原因なので、ちゃんと作らないといけないと感じました。ここまで作るとセレクターの優先順位とかもちゃんとやって無駄ルール消すのもやりたいですね。こうなってくるとリファクタリング用のツールのような気もするので、gruntで動く必要あんまり無い気もします。今後、形を考えつつ作りたいです。

あと、CSS Spriteも自動変換するツールをちょっと作っていたのですが、background-sizeの壁に阻まれて使う機会がありませんでした。この辺りは画像の再圧縮含めていい感じにしてくれるツールが欲しくなりますね。

ただ、今のスマホサイトはこういうものが普通に使われているんだな、と技術に触れるという意味では興味深かったです。

まとめ

超会議に行く機会ができた!という動機付けになり、参加したお陰でうろうろと見て回ることができ、もなかなか楽しめました。超会議の感想は他の媒体に譲るとして、日本の文化祭という表現はあながち間違いじゃないなあと感じました。

あと、こういうのイベントの運営はそれはそれで面白そうだなあと思いました。今後も頑張ろうと思いました。

第4回トークソンに参加しました

第4回トークソン : ATNDに参加してきました。ひたすらLTを行う修行系のイベントです。ピザ頂いて美味しかったです。

話したこと

三回やりました。内容的にはITエンジニア多めでしたが、分野が色々わかれていたので、内容的には軽めの話をしてきました。

三つ目は今日使ったGlideの宣伝です。これは大変良いツールでmarkdownでゴリゴリ書けるのが良いです。ただ、三つ目の残念な点に書いたように、元がmarkdownなので文字サイズとか画像サイズの自動制御が入ってくると嬉しいです。どういうのが入ると嬉しいか、今度コードを書いてみようと思います。

感想

今までこういう軽い内容を話すや資料を作る機会が無かったのですが、機会を作れたのが良かったです。特に資料をセットで作ることができる時間が確保できたのが、訓練になったと思います。

今回企画してくださったこばやんさん、会場を貸してくださったCo-Edoさん、ありがとうございました。また参加したいと思います!

daily-writingというものを作りました

毎日書き溜める系の文章をgitで管理したくてdaily-writingというものを作りました。

使い方

$ mkdir mytxt && cd $_
$ dwinit
$ mkdir foo && cd $_
$ echo "wrote text." > foo.txt
$ dwsave

ディレクトリ単位でファイルを結合したり、正規化したりするツールがぶっ込まれています。まだまだ、ドックフード中なので、どういう方向にまとまるかは未定です。

JavaScriptで文字数カウンタ作った

タイトルの通り、先日、文字数カウンタを作りました。ググって出てくる奴はテキストを入力してクリックしないとカウントが始まらない、Unicode対応していない、原稿用紙計算を改行考えてしていないなど、個人的に使い勝手が悪いものが多かったので、作ってみました。

原稿用紙換算は、改行ごとに文字数で割って行数を算出し、その合計を原稿用紙の行数で割っているので、普通に字数で割るよりは正確な値が出ています。禁則処理は辛いのでやっていません。

jsdo.itはこういうものをちょこっと作って公開するのに良いですね。