NOBODY:PLACE

レスポンシブかつグリッドな「Responsive Grid System」【feedpost tips】

昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。3回目はサイトデザインを支えるCSS「Responsive Grid System」。その名の通り「Grid System」でありながら「Responsive」であるという特徴を持った……なんだろう、「CSSテンプレート」とでも呼べば良いのかな？その特徴や導入の仕方などについては、以下のサイトを読んでもらえれば大体わかるので気になる方は読んでみてください。

Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋
先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ焦ったセナです。皆さんこんにちわ。さて、というわけで、今日は僕が日頃お世話になっているResponsive Grid Systemの仕様変更に伴い、ちょっとResponsive Grid Systemの使い方をもう一度見なおしてみる目的と、Web Designingさんに執筆させて頂いた内容に現在のバージョンと相違が見られるので、その簡単なご説明をさせて頂ければと思います！執筆記事の方を楽しみに見て頂いている皆さん「あれ？なんか違うくない？」と混乱させてしまいましたら本気で失礼しました！この記事から最新バージョンの仕様がちょっとでも説明できれば幸いです！

追記では、思い出話しがてら簡単な説明などを。

キーボードショートカットを実装するjQueryプラグイン「hotkeys」【feedpost tips】

昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 2回目はキーボードショートカットを実装するjQueryプラグイン「hotkeys」。導入はとっても簡単で、jQueryと一緒に読み込み、イベントをキーに合わせて設定してやればOK。フォーカスがdocumentにあるときの設定は例えばこう。このサンプルでは「J」キーを押すと「pressed J key」というポップアップが表示されます。input欄やtextarea欄にカーソルがあるときには反応しないので、神経質になりすぎることなく設定出来ます。

はてなブックマークAtomAPIへの接続が上手く行っていなかった件【解決】

この件の続き。（訂正あり）PEAR::Services_Hatenaが上手く動いていない影響でいくつか止まってます | mutter あまりに広範囲に影響がある&今まで動いていたものがそのまま動いていないので、結局はてなに問い合わせました。

質問

3/5頃より、はてなブックマークAtomAPIが上手く動いていないようなのですが、なにか仕様変更等あったのでしょうか？実行環境は、PHP5.3+PEAR::Services_Hatenaで、ユーザーネームとパスワードで認証しようとすると401が返ります。お手数ですが調査をお願いいたします。

翌日、すぐに回答が。

回答

お問い合わせの件につきまして、3月5日にはてな各種APIでのパスワードによるWSSE認証を終了しております。 http://hatena.g.hatena.ne.jp/hatena/20140305/1394012936 つきましては、パスワードからAPIキーへの変更、もしくはOAuth認証への移行をお願いいたします。 APIキーについては、下記のドキュメントをご参照いただければ幸いです。 http://developer.hatena.ne.jp/ja/documents/auth/apis/wsse

迅速な回答、ありがとうございました。が、しらねー！

【メモ】 GridSystemなどのリセットCSSを導入してXdebugが改行されなくなってしまった場合

ダンプの結果を綺麗に整形して表示してくれるモジュール「Xdebug」はPHP開発の定番ですが、今開発しているサービスであるタイミングから表示が崩れてしまいました。具体的には改行されなくて1行になってしまう（上画像参照）。 PEAR/PECLの変更も行っていたのでサーバの設定の問題だと考えてあれこれいじっても直らず、結果的にはGridSystem導入によるリセットCSSの影響であることが解りました。なんだそれ。

「Webフォント」と「アイコンフォント」のススメ【feedpost tips】

最近ずっと作ってきたものがようやくリリース間近になりました。と言うことで、その中で勉強したことを何回かに分けてブログに書いていこうと思います。第1回目は「Webフォント」とその応用である「アイコンフォント」について。

（訂正あり）PEAR::Services_Hatenaが上手く動いていない影響でいくつか止まってます

2014/03/13 追記
この問題ははてなのWSSE認証の仕様変更により生じたものでした。新しい仕様では「ユーザー名とパスワード」ではなく「ユーザー名とAPIキー」で認証することが求められます。「APIキー」とははてなで設定される「投稿用メールアドレス」の@の前の文字列です。これをパスワードの代わりにServices_Hatenaで使用してあげることで問題なく処理出来るようになりました。

「PEAR::Services_Hatena」は更新が止まってますし更新もしていないので、はてなの仕様変更だと思うのですが、上手く動かなくなってます。3/5から。具体的には、

複数のブックマークを取得する
ブックマークをポストする

あたりの機能が上手く動いていません。複数ブックマークは取得出来ないし、ポストは400で怒られます。その影響で、

ブログの記事をはてなブックマークでブックマークする
前日のはてなブックマークのまとめエントリをブログに投稿する

あたりが上手く出来ていませんでした。というわけで、順次「PEAR::Services_Hatena」を使わずにOAuthを使って取得またはポストするように変更しています。面倒だなあ……とは思いますが、よくよく考えてみればめんどくさがらずにトレンド通りさっさとOAuthに切り替えておけば良かったわけで、まあ良い機会なのかなと思ったりします。自分用のはてな用クラス、更新しないと。

CSSで指定出来る色名

CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。理由は、

「色名指定」では柔軟な設定が出来ない（一段階濃くとか）
ブラウザに解釈を任せたくない

で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。参考になるサイトはたとえばこちら。 CSS/HTML色見本全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとまあ。数字を細かく調整して柔軟に設定した色って、後で忘れちゃうことが結構あるんですよね……作業の効率を考えたら「色名」で設定する方のもありかなあと。特にCSSに不慣れな人が参画するプロジェクトにおいては、色を「色名」で指定すると見通しが良くなって良いのではないかなと思います。色コードやRGB値で表示される色を想像しろと言っても厳しいものがありますし。そんなことを考えて、最近は、文字色や背景色をできる限り「色名」で指定するようにしています。

（続き）【メモ】 callbackで「#_=_」が付いて来てしまう件への対応

先日、OAuthで認証したあとのcallbackのURLの末尾に「#_=_」が付いて来てしまうことがあるのを回避するというのをメモったのですが、【メモ】 callbackで「#_=_」が付いて来てしまう件への対応 | mutter これでは上手く動かないことがあるのが解りました。具体的には、リダイレクト先で期待するURLはこれだったとき、

http://hoge.com/?foo=bar

コールバックからのリダイレクトがこれになり、

http://hoge.com/?foo=bar#_=_

前回のスクリプトで是正するとこうなってしまいます。

http://hoge.com/

引数が落ちちゃう。というわけで、対応しました。

【メモ】 callbackで「#_=_」が付いて来てしまう件への対応

このスクリプトだと引数が落ちてしまうようです。それに対応したのがこちら（続き）【メモ】 callbackで「#_=_」が付いて来てしまう件への対応 | mutter

どういう理屈なのか解りませんが、OAuthで認証したあとのcallbackのURLの末尾に「#_=_」が付いて来てしまうことがあるようです。検索した限りではFacebookがそういう仕様のようで、Tumblrも同じような仕様です。多分、サービス側に何らかの理由があってこうなっているんだとは思うのですが、受け取る側からするとちょっと不都合があります。例えば、

http://hoge.com/return

というURLをcallbackに指定してリクエストを投げた場合、こんな感じで返ってきます。

http://hoge.com/return?oauth_token=xxx&oauth_verifier=yyy#_=_

んで、何らかの処理をしてサイトのトップページにリダイレクトをしてやると（例はSymfony）、

$this->redirect('hoge/index')

URLはこうなってしまいます。

http://hoge.com/#_=_

本当はこうしたいのに。

http://hoge.com

もしかしたらフレームワーク側で対処出来るのかも知れませんし、ブラウザの設定なのかも知れませんが、検索して情報を収集してみた結果「JavaScriptでアドホックな対応」というのがポピュラーなようなので、とりあえずそれに従うことにしました。

gistの埋め込みを入れると表示が崩れる件

ブログにコードの一部だけを載せたいようなとき、githubのgistにアップしてその埋め込みをブログに貼るというのを良くやるのですけど、このところずっとその埋め込みの表示が崩れて難儀してました。上の画像にあるとおり、

スクロールバーが2重に出てしまう
コードの一番上に隙間が出来る
行番号とコードの行がずれる

といった感じに崩れてしまって、コードは読めるものの見栄えがよくない。とはいえ埋め込みってことは通常CSSの管理はサービス側の仕事だし、こっちでやれることはないんだろうな……と思ってたらそうでもなかった。これiframeじゃなくて生のHTMLタグを書き出してるんですね。そうだったのか。だからCSSをこちらで設定してやれば崩れるのを修正出来ると。