GitHub製エディタAtomのテーマを作ってみた - アインシュタインの電話番号
自分が普段使っている頭文字Vのエディタでは、RailsCastsのテーマを自分用にカスタマイズしたものを使っているんだけど、最近リリースされたGitHub製エディタのAtomにそれを移植して、そのパッケージを公開してみた。 Atomcasts Syntax Theme RailsCastsのテーマを正確に再現したものではなく、だいぶオレオレな配色になっている。また、ちゃんと動作確認までできているファイルタイプはまだ少ないけど、自分が普段使うファイルタイプは自分で使っていきながら徐々に対応していく予定。基本的にvim-modeでAtomを使っているので、vim-modeらしい装飾とかにできたらいいなぁと思ってる。 Atomのパッケージ公開はとても手軽で、GitHubリポジトリが作ってあればコマンド一発で公開できる。公開するとこんな感じでカラフルに祝ってくれた。 そして、その作ったAtomパッ
リーダブルコードを読み終えて、ノンデザイナーズ・デザインブックを読み返す - アインシュタインの電話番号
今年のテーマは、積ん読を減らすことにした。良さそうな本があったりセールがあったりするとついつい買ってしまって、それである程度満足して読まないまま、というパターンにハマっていることが、AmazonのKindle日本上陸以降の自分の買い方で一目瞭然になってきたからである。ゆゆしき事態。 電子書籍は物理的なスペースを取るわけではないので、それが目に見えるわけではないんだけど、その電子書籍の大きな利点が積ん読の増加に拍車を掛けていることは明白である。というわけで今年は、積んでいる本を積極的に読んでいきたい。リーダブルコードはその1冊目。 汎用性の高い言葉 本書には、全体を通して良いフレーズがたくさん散りばめられている。その中でも、一番気に入ったフレーズはこれ。 最善の名前とは、誤解されない名前である。つまり、君のコードを読んでいる人が、君の意図を正しく理解できるということだ。 リーダブルコード (
37signalsのREMOTEを読み終えて、1996年のリモートワークを振り返る - アインシュタインの電話番号
3年前にREWORKを読んだ時は、ものすごくグッと来るものがあり、それは今でも年に数回読み返すくらいのお気に入りになっている。そんな37signalsがリモートワークについての新しい本を出し、ありがたいことに日本語版もすぐ出版されたので、即予約して手に入れたその日に一気に読み終えた。 結論から言えば、実践的でとても良い本だと思うけど、REWORKの時ほどは響かなかった。なんでかなと考えていて、それはおそらく自分がそれなりにリモートワークの経験を持っていたからなのかもしれないと思い、その経験について振り返って本書と照らし合わせることで新たな発見があるかもしれないと考えた。自分の経験してきたリモートワークは、37signalsのような華麗な仕事っぷりは微塵もないけど、それでも本書の内容は頷けるものばかりであり、すでにリモートワークの良さは十分わかっていたので、新鮮味に欠けてしまったのかもしれな
Font Awesome WorkflowがPhotoshopやIllustratorでもペースト可能に - アインシュタインの電話番号
Font Awesome Workflowは元々、フロントエンド開発者向けに…というかクラス名を覚えられない自分のために作ったんですが、公開後になかなかの好評を得て、Photoshopでもペーストできるようにして欲しいとか文字コードをペーストできるようにして欲しいなどのリクエストをもらったので、それらに対応したバージョン2.0を昨日リリースしました。 バージョン2.0の目玉はやはり、フロントエンド開発者だけでなく、デザイナーにとっても便利になった点で、PhotoshopやIllustratorなどのグラフィックソフトでもペーストが可能になりました。今回もスクリーンキャストを作ってみたので、どんな感じの動作かは上記のGIFアニメをご覧ください。これはIllustrator CC上で使用している動作例です。 4種類のモード 前述のグラフィックソフト上でのペーストに加えて、文字コードをペーストす
Pull RequestとCIを使ったGitHub Flowなブログ環境を作ってみた - アインシュタインの電話番号
今から1年ほど前に、自分でお気に入りのブログ環境を構築する記事が話題になっていて、それを読んだ時から、自分用のブログ環境を作りたいと思っていた。 俺の最強ブログ システムが火を噴くぜ - てっく煮ブログ 俺の最強ブログシステムも火を噴いてたぜ - Webtech Walker 当時はそれどころではなかったこともあって、なかなか着手できずにいたんだけど、今年の7月頃から作り始めて、最近そこそこ希望通りの形になったので、まだやり残しはたくさんあるけれど、一旦ここで一区切りということでその内容を記事にしてみる。 この手の話では静的なブログツールが主流で、当時はJekyllやOctopressが流行っていて、最近ではMiddlemanを使うのが流行りつつある印象。でも自分が作ってみたかったのは、Webサービスを開発するのと同じフローで、ブログも更新できるようにするというもの。そのフローとは、表題の
フロントエンド開発者向けのAlfred Workflow - アインシュタインの電話番号
1ヶ月前に、Web開発者にオススメなAlfred用のWorkflowをまとめたGitHubリポジトリが2,000 starsを超える人気を博していて、その中に自作のFont Awesome Workflowも選ばれていて、それをきっかけに開発者向けのWorkflowが盛り上がっていることを知った。[^1] [^1]: このリポジトリは更新が遅く、各Workflow作者の最新バージョンを反映していない問題があったため、Font Awesome Workflowではこちらから削除依頼を出してリストから消してもらいました。そのため現在は掲載されていません。 つい最近だと、Googleのエンジニアで著名なAddy Osmaniがプレゼンで紹介していたり、フロントエンド向け情報サイトとして有名なSmashing Magazineが特集記事にしていた。 Automating Front-end Wor
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
宇多田ヒカル大好き専用「ウタダヒカループ」を作ってみた - アインシュタインの電話番号
冷蔵庫で設計したWebサービス、宇多田ヒカル大好き専用「ウタダヒカループ」を8月8日にリリースしました。 すぐに、ずっと、ぼんじゅーる。 今回のWebサービスの制作理由をざっくりまとめると以下の2点です。 ブラウザに uhloop.com とだけ打ち込めば、すぐに、ずっと、宇多田ヒカルを聴いていられる・観ていられるサービスが欲しかった。 活動休止ライブのDVD「WILD LIFE」で、宇多田さんがとても楽しそうに観客とぼんじゅーる!!を言い合っているシーンを観ていたら、自分もぼんじゅーるしたくなった。 キャッチコピー「すぐに、ずっと、ぼんじゅーる。」はこんな意図で付けました。 もう1つ大事なことを書き忘れていました。このウタダヒカループで再生されるPVは、閲覧者全員が同じ曲目・同じ再生時間で視聴できます。ですので、みんなで同じ曲を聴きながら、ぼんじゅーるメッセージやTwitterを介して、
冷蔵庫の前面をホワイトボード替わりにして設計したWebサービスを今夜リリースします - アインシュタインの電話番号
宣伝です。 前作「SASSIENCE ～ 世界が嫉妬するCSSへ」を公開してから2ヶ月以上経ってしまいましたが、やっと新作が出来上がったので今夜（8日0時以降）リリースします。 今回は、フロントエンドにはFlashを採用し、サーバーサイドはNode.jsとSocket.ioを採用しました。今まで一貫してSinatraとSlimとSassを使ってきたので、新しい技術を理解するまでに結構ハマりました。また、フロントエンドも今までに比べると結構インタラクティブな作りなので、従来のEvernoteにTODOをリストアップするだけでは画面構成などが把握しきれないこともあり、上の画像のように冷蔵庫の前面をホワイトボード替わりに^1使って、具体的な画面構成や演出を何度も書き殴りました。 そんなこんなで試行錯誤もあって、今までのWebサービスに比べると倍以上の制作期間を費やしましたが、なんとかリリースでき
マージでバイナリファイルがコンフリクトした場合のGitの動作と対処方法 - アインシュタインの電話番号
最近ブランチを使ったGit利用にチャレンジしているruedapですスラマッパギ。さて、ブランチをマージするときにコンフリクトして涙目になるんだけど、普通のソースコード（テキストファイル）なら、なんか>>>>>>>>みたいな記号で印を付けてくれるから、その周辺を直せばOKというのは理解した。これも結構ビクビクしながらの修正ではあるんだけども、今日はバイナリファイルがコンフリクトしてどうすればいいのか困ったのでその備忘録。 例えばこんなマージをする状況の想定。masterブランチとdevelopブランチがあったとして、それぞれのブランチにhoge.swfというバイナリファイルがあったとする。 masterブランチにdevelopブランチをマージしてみたら、hoge.swfがコンフリクトを起こしたとする。 $ git merge develop warning: Cannot merge bin
VimのステータスラインにGitのブランチ名を表示する（右側に） - アインシュタインの電話番号
前回の記事で、とりあえずMacのターミナルでGitのブランチ名を表示できたので、そのきっかけの元記事VimのステータスラインにGitのブランチ名を表示するを実行してみた。 記事のとおりにやったらサクっとブランチ名を表示できたんだけど、そのままだと見た目が思い通りではなかったので、ちょっとカスタマイズしてみた。こんな感じ。 そう、ブランチ名を右側に表示したかった。以下はそれについての備忘録。 Gitのブランチ名を右側に表示する まず前提として、VimのステータスラインにGitのブランチ名を表示する方法については、id:marutanmさんのこちらの記事を見てもらえばおｋ（丸投げ） 上記の記事の通りに設定して、既にGitのブランチ名の表示はできてるとして、これをそのまま使うとそれまで使っていたカスタマイズしたステータスラインの表示と変わってしまう。今まで使っていた.vimrcのstatusli
MacのターミナルでGitのブランチ名を表示する - アインシュタインの電話番号
VimのステータスラインにGitのブランチ名を表示させる、という記事で以下の一文が。 当然、ターミナルのプロンプトには表示させてますよね？ 今こそ！git の branch を vim のステータスラインに表示！！するとき！！！ すみません、表示させてませんでしたッ…! WindowsでmsysGit使ってる時にはプロンプトにブランチ名が表示されてて、これ結構便利かもなーとは思ってたんだけど、そもそも自分はGitのブランチをまともに使えてないので、ありがたみがよくわかってなかった。でもこれからちゃんと使うためにも早めに表示しておいたほうが良さそう。上記の記事のようにVimでも表示させたいしね。というわけで、とりあえずMacのターミナルでGitのブランチ名を表示できるようにしておく。完成形はこうなる。 git-completion.bash 今回はこちらの記事を参考にさせてもらった。ちなみに
Node.jsアプリでCSSテンプレートにStylusを使う - アインシュタインの電話番号
前回のつづき。Node.js(Express)で使えるSassは、1つ前の旧型のSassシンタックスで、現在最新のバージョン3形式での記述が出来なかったという話。これを改善する情報をいろいろ探し回った末、Stylusという新しいCSSテンプレートに出会ったぁ（ウルルン風に） 旧型Sass問題 Sassは、現在最新版のバージョン3でのシンタックスと、それ以前のシンタックスで微妙に書き方が違う。さらに、バージョン3からはSCSS形式も導入されたので、結構ややこしい。expressコマンドの-cオプションを使って、Sassを指定した場合に自動生成されるstyle.sassはこんな感じ。これは旧型のSassシンタックス。 body :padding 50px :font 14px "Lucida Grande", Helvetica, Arial, sans-serif a :color #00B
Node.jsアプリをCoffeeScriptで記述する - アインシュタインの電話番号
Node.jsでのHello worldを済ませて、expressコマンドでアプリの雛形を自動生成できるようになったので、自分がNode.jsに興味を持った当初の目的である以下について実行してみる。 普段自分がRubyで使っているSinatra+Slim+Sassと似たような開発環境を、Node.jsでもExpress(CoffeeScript)+Jade+Sassを使えば実現できるかも？ 個人的には、上記の憶測がなかったらNode.jsをやってみようと思わなかったと言っても過言ではないので、できるだけ早い段階でこの組み合わせをやってみたくて、まずはCoffeeScriptを触ってみた。 Node.jsアプリの雛形を自動生成 まずはNode.jsアプリの雛形を自動生成する。-cオプションでCSSにはSassを使うことを指定する。HTMLはデフォルトでJadeが選ばれるので指定はなし。 $
Node.js(Express)アプリの雛形を自動生成する - アインシュタインの電話番号
昨日の記事では、Node.jsアプリでHello worldする際に、それに必要なファイル(web.js, package.json, Procfile, .gitignore)を1個ずつ新規作成してたけど、expressコマンドを使えばその雛形を自動生成できることに後から気づいた。これを使うと、web.js(=app.js)とpackage.jsonの2つは自動生成できる。Sinatra単体には無い機能だね。 あと、Sinatraアプリ開発時に使われる自動リロード機能(ShotgunやSinatraReloaderなど)に相当するnode-devをちょっと使ってみたので、それについてもメモ。 expressをグローバルインストール expressコマンドを使うには、Expressパッケージをグローバルインストールする。 $ npm install -g express /Users/ru
HerokuでNode.jsとExpressを使ってHello worldする - アインシュタインの電話番号
普段自分はHeroku+Sinatra+Slim+SassでWebアプリを作っているんだけど、Node.jsやCoffeeScriptについてちょっと調べてたら、Herokuを使う前提で、Node.js(Express), Jade, Sassという組み合わせでCoffeeScriptで書けば、前述のSinatraアプリとほぼ同じような感覚で書けそうなことに気づいて、ぐっとNode.jsに興味が沸いた。 ということで、さっそくHerokuを使ってNode.jsアプリを作ってHello worldしてみた。今回の記事を最後まで行くと、これが出来上がる。ソースコードはGitHubに。 各種インストール この記事ではNode.jsとExpressだけを使ってHello worldする。今回はJadeやSass, CoffeScriptは出てこない。まず、Node.jsとExpressを使うのに必
今すぐフォローすべき各界のスーパーエンジニアまとめ - アインシュタインの電話番号
最近流行ってる今すぐフォローすべきスーパーエンジニアの各界(Node.js, Perl, Python, PHP, Ruby)のリストを勝手にまとめてみた。 元記事を見てね 以下のリスト元となっている各記事では、 なぜこのスーパーエンジニアな人達をリストアップしたのか その人達の書いたどんなブログ記事がオススメか どんなフレームワークやライブラリに精通しているか どんな分野のコミッターなのか などが紹介されていますので、元記事をご覧になった上でこちらのフォロー用リンクをご利用ください。また、下記でリストアップされているご本人でリストから外して欲しい方や、リンクなどに間違いがあれば教えてもらえると嬉しいです。 Node.js 今すぐフォローすべきnode.js界のスーパーエンジニア - 大人になったら肺呼吸 @meso @sugyan @dameninngenn @bad_at_math @
Facebookページのいいね！ボタンが押されているかをSinatraで判定する - アインシュタインの電話番号
例えばFacebook上でのキャンペーンで、「Facebookページのいいね！ボタンを押してくれた方全員にもれなく壁紙プレゼント」などを行う場合に、いいね！ボタンが押されたかどうかを取得して、その値でページを振り分ける必要がある。そのやり方についてのメモ。 今回のはHeroku+Sinatraの組み合わせで、特にFacebook用のライブラリなどは使用していない。ざっと調べた感じだと、PHP+Facebook SDKを使うのが一番簡単そうに見えたんだけど、SDKがPHP5.2以上必要っぽくて使えなかった。ちなみに、Facebook上でのキャンペーンや懸賞を行う場合の利用規約については、以下のページが詳しくて参考になった。 やっちゃっていませんか？Facebookの規約違反 これを読むと、かなり厳しい感じ。 予備知識 予備知識として、Facebookページについて以下のことを押さえておく必要
SASSIENCEのソースコードをGitHubに公開してみた - アインシュタインの電話番号
CSSのインデントを綺麗にするサービスSASSIENCEのコードをGitHubに公開してみた。 今回もHeroku+Sinatra+Slim+Sass SASSIENCEのソースコードを公開しているリポジトリはこちら。 ruedap/sassience at master - GitHub 今回も過去の自作Webアプリと同じで、Heroku, Sinatra, Slim, Sassの組み合わせで作っている。というか、今回は今までで使っているライブラリが最も少なくて、上記プラス「rack-rewrite」だけ。メイン部分のapp.rbも200行に満たないくらい小さなWebアプリ。 独自ドメイン割り当てとパーシャル 今回のSASSIENCEで新しく挑戦したことは、実はあんまりなくて、Herokuアプリに独自ドメインを割り当てることと、Slimでパーシャルを使えるようにしたことくらい。 Hero
PHPでHTTPS(SSL)接続じゃなかったらHTTPSのURLにリダイレクトする - アインシュタインの電話番号
入力フォームなどのHTTPS(SSL)で接続して欲しいページにHTTPで接続があった場合に、HTTPSにリダイレクトする方法について調べた。PHPはググればそれっぽい日本語情報がすぐ引っかかるのがいいね。それがお作法として正しいかどうかまではわかんないけど… HTTPSじゃなかったらHTTPSにリダイレクト HTTPSじゃなかったら、$_SERVER['HTTPS']の値がNULLらしいのでその値から判定するといいみたい。 <?php var_dump($_SERVER['HTTPS']); ?> 上記を実行したら、HTTPだとNULLが、HTTPSだとon（String）が返ってきた。次に、URLスキーム以外の部分の現在のURLを取得する必要がある。それが以下。 <?php // 例えばURLが [http://example.com/hoge/fuga.php](http://exam
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
