サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
blog.ruedap.com
自分が普段使っている頭文字Vのエディタでは、RailsCastsのテーマを自分用にカスタマイズしたものを使っているんだけど、最近リリースされたGitHub製エディタのAtomにそれを移植して、そのパッケージを公開してみた。 Atomcasts Syntax Theme RailsCastsのテーマを正確に再現したものではなく、だいぶオレオレな配色になっている。また、ちゃんと動作確認までできているファイルタイプはまだ少ないけど、自分が普段使うファイルタイプは自分で使っていきながら徐々に対応していく予定。基本的にvim-modeでAtomを使っているので、vim-modeらしい装飾とかにできたらいいなぁと思ってる。 Atomのパッケージ公開はとても手軽で、GitHubリポジトリが作ってあればコマンド一発で公開できる。公開するとこんな感じでカラフルに祝ってくれた。 そして、その作ったAtomパッ
今年のテーマは、積ん読を減らすことにした。良さそうな本があったりセールがあったりするとついつい買ってしまって、それである程度満足して読まないまま、というパターンにハマっていることが、AmazonのKindle日本上陸以降の自分の買い方で一目瞭然になってきたからである。ゆゆしき事態。 電子書籍は物理的なスペースを取るわけではないので、それが目に見えるわけではないんだけど、その電子書籍の大きな利点が積ん読の増加に拍車を掛けていることは明白である。というわけで今年は、積んでいる本を積極的に読んでいきたい。リーダブルコードはその1冊目。 汎用性の高い言葉 本書には、全体を通して良いフレーズがたくさん散りばめられている。その中でも、一番気に入ったフレーズはこれ。 最善の名前とは、誤解されない名前である。つまり、君のコードを読んでいる人が、君の意図を正しく理解できるということだ。 リーダブルコード (
3年前にREWORKを読んだ時は、ものすごくグッと来るものがあり、それは今でも年に数回読み返すくらいのお気に入りになっている。そんな37signalsがリモートワークについての新しい本を出し、ありがたいことに日本語版もすぐ出版されたので、即予約して手に入れたその日に一気に読み終えた。 結論から言えば、実践的でとても良い本だと思うけど、REWORKの時ほどは響かなかった。なんでかなと考えていて、それはおそらく自分がそれなりにリモートワークの経験を持っていたからなのかもしれないと思い、その経験について振り返って本書と照らし合わせることで新たな発見があるかもしれないと考えた。自分の経験してきたリモートワークは、37signalsのような華麗な仕事っぷりは微塵もないけど、それでも本書の内容は頷けるものばかりであり、すでにリモートワークの良さは十分わかっていたので、新鮮味に欠けてしまったのかもしれな
BEMに関するこのあたりの考え方や期待感は、2014年でもう少し突っ込んで取り組みたい所存。Twitterへのツイートをブログ記事にする省エネ投稿。 似たような話として、以前書いたBEMに関する記事ではこういう表現をした。 例えばサーバーサイドやJavaScriptのエンジニアが仮にCSSの設計を把握していなくても、とりあえずBEMの命名規則を覚えてもらえればブロック単位で維持すべきだと理解してもらえるので、それだけでデザインを壊してしまうリスクを結構回避できる。また命名した本人であっても、半年経ってから見たらBEMの名前はわかりやすく見えそう。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 他のコードに比べると、HTMLはより多くの人が編集する場所なので、HTML上に割り振られるID名やクラス名はそれ単体で「何のための名前か」「どういう構造か」「変更
Font Awesome Workflowは元々、フロントエンド開発者向けに…というかクラス名を覚えられない自分のために作ったんですが、公開後になかなかの好評を得て、Photoshopでもペーストできるようにして欲しいとか文字コードをペーストできるようにして欲しいなどのリクエストをもらったので、それらに対応したバージョン2.0を昨日リリースしました。 バージョン2.0の目玉はやはり、フロントエンド開発者だけでなく、デザイナーにとっても便利になった点で、PhotoshopやIllustratorなどのグラフィックソフトでもペーストが可能になりました。今回もスクリーンキャストを作ってみたので、どんな感じの動作かは上記のGIFアニメをご覧ください。これはIllustrator CC上で使用している動作例です。 4種類のモード 前述のグラフィックソフト上でのペーストに加えて、文字コードをペーストす
今から1年ほど前に、自分でお気に入りのブログ環境を構築する記事が話題になっていて、それを読んだ時から、自分用のブログ環境を作りたいと思っていた。 俺の最強ブログ システムが火を噴くぜ - てっく煮ブログ 俺の最強ブログシステムも火を噴いてたぜ - Webtech Walker 当時はそれどころではなかったこともあって、なかなか着手できずにいたんだけど、今年の7月頃から作り始めて、最近そこそこ希望通りの形になったので、まだやり残しはたくさんあるけれど、一旦ここで一区切りということでその内容を記事にしてみる。 この手の話では静的なブログツールが主流で、当時はJekyllやOctopressが流行っていて、最近ではMiddlemanを使うのが流行りつつある印象。でも自分が作ってみたかったのは、Webサービスを開発するのと同じフローで、ブログも更新できるようにするというもの。そのフローとは、表題の
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を使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
今も昔もフリーフォントのカルチャーはデザイナー界隈では根強く、最近では欧文フォントだけでなく、M+ Fontsやはんなり明朝などの和文フォントまで無料でダウンロードできてとても有り難いことです。ただ、それらを創作やビジネスとして利用させてもらって外部に公開する場合は、個々のフォントのライセンスについて把握しておかなければなりません。 Gitのブランチ機能を使えば、これを楽にできるのではと思いついて、半年ほど実践してみたところ、思いついた時に想定したほどの便利さではなかったものの結構いい感じなので、そのやり方をひと通り紹介してみます。 文章が長くなりそうなので、この方法の何がメリットなのかを先に列挙しておくと、 どこのページからダウンロードしたか、一言メモなどをフォントごとに記録しておける 商業利用可、個人利用のみ、その他、などのライセンス別にフォントを管理できる PhotoshopやIll
うまい話とジェットコースターには乗るなって言ってたばあちゃんの知恵袋だけど、Sassに含まれているsass-convertコマンドを使うと.sass形式と.scss形式を相互に変換できる。 $ gem i sass $ sass -v Sass 3.2.11 (Media Mark) $ sass-convert --help Usage: sass-convert [options] [INPUT] [OUTPUT] (snip) これを使って、以下は現在のフォルダの.sassを.scssに一括で変換する場合。自分の好みで普段書いているのは.sass形式なんだけど、納品物やチームで使っているのは.scss形式ってことがままあるため、そういう時に使う。 $ sass-convert -F sass -T scss . -R $ rm *.sass 自分の場合、今開いてるファイルを.sass
継続的インテグレーションができるようになったのなら、あとは継続的デプロイメントまでやっていただきたいし、大切なのは倍返しじゃなくて繰り返しだねってことで表題の通り。 前にやろうとして調べた時は、HerokuのAPIキーを暗号化して自前でデプロイ用スクリプトを用意して…てな感じでややこしそうだったけど、今はTravis CIで正式に対応していて、コマンド一発で設定できてしまう簡単さで、驚きのあまり出向しそうになった。 The Travis CI Blog: Introducing Continuous Deployment to Heroku HipChatに通知を送る時にも使ったtravis gemからその設定を行える。 $ travis setup heroku Deploy only from ruedap/daplog? |yes| yes Encrypt API key? |yes
リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ
前回の記事に関連して、このリポジトリでTravis CIを使って継続的インテグレーションを行うようにしたので、そのテスト結果をHipChatにも通知されるようにした。こんな感じ。 テストに失敗すると以下のような感じで、怒りに満ちた王蟲の目のような赤色に。 通知系を設定する場合は、APIトークンを入力するか、設定画面でポチッとするだけで簡単な事が多いけど、パブリックリポジトリでのTravis CIは、設定を.travis.ymlに記述するので情報が公開されてしまう。それを回避するために暗号化する方法が提供されている。 travis encrypt まずはtravis gemをインストールする。このgemは、Travis CIに関する各種操作をCLIから実行できるもので、前述の暗号化もこれを利用する。このgemのtravis encryptコマンドを使用して、対象の文字列を暗号化できる。 今回
先月に公開した超ニッチなツールFont Awesome Workflow for Alfred 2が意外と好評で、そこにオクラホマ州からこれOS X Mavericksで動いとらんよとお便りが届いたりした。 そんなわけで少々テストを書いた上で、Mountain Lion以前に入っているRuby 1.8.7と、Mavericks以降に入るRuby 2.0.0の両方で常に動作確認しておくようにしたいと考えて、まずTravis CIを、その後CoverallsとCode Climateを導入した。この記事はその備忘録。 {: .ArtcleBody-inlineImage .u-textCenter } それらを導入すると、こんなかんじのバッジを表示できる。GitHubでよく見かけるやつ。今回使ったサービスはどれも、オープンソースなら無料で使わせてもらえる。 Travis CIは名前の通り継続的
ずっと2011年でブログが止まっていたことと、最近活動を再開しはじめたこともあって、たまに「今まで何してたの?」「今何してるの?」と訊かれます。3行でまとめると、 2011年、転職活動を開始、ウタダヒカループの記事でもそれを告知。で転職、引っ越し等 2012年、病気が発覚して青天の霹靂。療養に専念するために退職して実家の名古屋に都落ち 2013年、まぁまぁ回復、自宅からの完全リモートでスタートアップ2社に参加中 ←イマココ という感じのライフログでした。個人的な話ばかりですが、以下でもうちょっと詳しく。 2011 2011年は自分にとって、大きな転換点がいくつもあった年でした。まず、何よりも震災。地震発生時は東京で働いてて、特に被害には遭わなかったのですが、それでも今までにないほど、死を身近に感じました。この時に、もっと自分のやりたいことをやろう、本気で打ち込めることをやろう、と強く思って
ブログの再開が2年ぶりだったけど、作ってみたシリーズも同じく2年ぶり。お久しぶり。さて今回は、ものすっごくニッチなツールだけど、Font Awesomeを使ってる人でAlfredを使ってる人には喜んでもらえる気がする。イコール自分のことなんですけどね。 あのアイコンフォントのクラス名を全然覚えられなくて、アイコンの数も300個以上あって把握できなくなっていて、毎回Font Awesomeのサイトを開いて探すのも面倒なので、 Font Awesomeのアイコンをインクリメンタルサーチしてそのクラス名をペーストできる Alfred 2用のプラグインを作ってみた。 百聞は一見に如かず、どんなものかは以下のスクリーンキャストをご覧ください。 前から欲しいとは思ってたんだけど重い腰があがらなくて、でも先週、エンジニア界隈で人気のポッドキャストRebuild.fm #16を聴いていたら「Font Aw
2年近くスリープ状態になっていたブログだけど、心機一転、はてなブログから独自実装のRails 4アプリに引っ越して、デザインも新しく作りなおした。フロントエンドやサーバーサイドで試してみたいこともあるので、このブログを実験台にするための再起動。 フィードがまだ無いとか、記事を投稿する機能も無いとか、HTML/CSSが乱数に依存しててキャッシュする気配を全く見せない作りだとか、なかなかの未完成かつ富豪っぷりだけど、とりあえず必要最低限な状態にはなったので、YAGNIってことで運用を開始してみる。 未対応予定 前述のとおり、いろいろと未完成でこれから徐々に補っていく予定ではあるけど、現時点で今後も対応するつもりの無いものが2つ。Internet Explorerとソーシャルボタン。 Internet Explorer 今のCSSもIE9での閲覧すら怪しそうだなぁ^1と思いながらSassを書いて
来年からPHPも触ることになりそうなので、いろいろメモっていく予定。とりあえずPHPは良く知らないので、教科書は最近出たばかりで評判の良いパーフェクトPHPにするつもりだけどまだ届いていない。 PHPで書くと さて、いきなり配列でハマってビビった。変数に代入すると参照ではなくコピー。常識っすか? 完全にオブジェクト脳だったのでこれはかなりインパクトがあった。 <?php $a = array('hoge'); array_push($a, 'fuga'); array_push($a, 'piyo'); $b = $a; $a[1] = 100; var_dump($b); var_dump($a); array(3) { [0]=> string(4) "hoge" [1]=> string(4) "fuga" [2]=> string(4) "piyo" } array(3) { [0
Mac OS Xのデフォルトでは、HOMEに.bashrcを作成してもターミナル起動時に自動で読み込むようにはなっていないようなので、自動で読み込むように.bash_profileに記述すると良い模様。 .bash_profileを作成 HOMEに.bash_profileを作成して以下を記述。 if [ -f ~/.bashrc ] ; then . ~/.bashrc fi これでターミナルを再起動すれば、起動時に自動的に.bashrcを読み込んでくれる。 とあるプログラマーの覚書 OSXでのbashrcの設定
hi Hint z-index:5000; font-family:Menlo; font-size:14px; color:white; background-color:red; border-color:ButtonShadow; border-width:0px; border-style:solid; padding:0px 2px 0px 2px; position:absolute; Vimperatorが2.0になった - chibilog
冷蔵庫で設計したWebサービス、宇多田ヒカル大好き専用「ウタダヒカループ」を8月8日にリリースしました。 すぐに、ずっと、ぼんじゅーる。 今回のWebサービスの制作理由をざっくりまとめると以下の2点です。 ブラウザに uhloop.com とだけ打ち込めば、すぐに、ずっと、宇多田ヒカルを聴いていられる・観ていられるサービスが欲しかった。 活動休止ライブのDVD「WILD LIFE」で、宇多田さんがとても楽しそうに観客とぼんじゅーる!!を言い合っているシーンを観ていたら、自分もぼんじゅーるしたくなった。 キャッチコピー「すぐに、ずっと、ぼんじゅーる。」はこんな意図で付けました。 もう1つ大事なことを書き忘れていました。このウタダヒカループで再生されるPVは、閲覧者全員が同じ曲目・同じ再生時間で視聴できます。ですので、みんなで同じ曲を聴きながら、ぼんじゅーるメッセージやTwitterを介して、
宣伝です。 前作「SASSIENCE ~ 世界が嫉妬するCSSへ」を公開してから2ヶ月以上経ってしまいましたが、やっと新作が出来上がったので今夜(8日0時以降)リリースします。 今回は、フロントエンドにはFlashを採用し、サーバーサイドはNode.jsとSocket.ioを採用しました。今まで一貫してSinatraとSlimとSassを使ってきたので、新しい技術を理解するまでに結構ハマりました。また、フロントエンドも今までに比べると結構インタラクティブな作りなので、従来のEvernoteにTODOをリストアップするだけでは画面構成などが把握しきれないこともあり、上の画像のように冷蔵庫の前面をホワイトボード替わりに^1使って、具体的な画面構成や演出を何度も書き殴りました。 そんなこんなで試行錯誤もあって、今までのWebサービスに比べると倍以上の制作期間を費やしましたが、なんとかリリースでき
最近ブランチを使ったGit利用にチャレンジしているruedapですスラマッパギ。さて、ブランチをマージするときにコンフリクトして涙目になるんだけど、普通のソースコード(テキストファイル)なら、なんか>>>>>>>>みたいな記号で印を付けてくれるから、その周辺を直せばOKというのは理解した。これも結構ビクビクしながらの修正ではあるんだけども、今日はバイナリファイルがコンフリクトしてどうすればいいのか困ったのでその備忘録。 例えばこんなマージをする状況の想定。masterブランチとdevelopブランチがあったとして、それぞれのブランチにhoge.swfというバイナリファイルがあったとする。 masterブランチにdevelopブランチをマージしてみたら、hoge.swfがコンフリクトを起こしたとする。 $ git merge develop warning: Cannot merge bin
前回の記事で、とりあえずMacのターミナルでGitのブランチ名を表示できたので、そのきっかけの元記事VimのステータスラインにGitのブランチ名を表示するを実行してみた。 記事のとおりにやったらサクっとブランチ名を表示できたんだけど、そのままだと見た目が思い通りではなかったので、ちょっとカスタマイズしてみた。こんな感じ。 そう、ブランチ名を右側に表示したかった。以下はそれについての備忘録。 Gitのブランチ名を右側に表示する まず前提として、VimのステータスラインにGitのブランチ名を表示する方法については、id:marutanmさんのこちらの記事を見てもらえばおk(丸投げ) 上記の記事の通りに設定して、既にGitのブランチ名の表示はできてるとして、これをそのまま使うとそれまで使っていたカスタマイズしたステータスラインの表示と変わってしまう。今まで使っていた.vimrcのstatusli
VimのステータスラインにGitのブランチ名を表示させる、という記事で以下の一文が。 当然、ターミナルのプロンプトには表示させてますよね? 今こそ!git の branch を vim のステータスラインに表示!!するとき!!! すみません、表示させてませんでしたッ…! WindowsでmsysGit使ってる時にはプロンプトにブランチ名が表示されてて、これ結構便利かもなーとは思ってたんだけど、そもそも自分はGitのブランチをまともに使えてないので、ありがたみがよくわかってなかった。でもこれからちゃんと使うためにも早めに表示しておいたほうが良さそう。上記の記事のようにVimでも表示させたいしね。というわけで、とりあえずMacのターミナルでGitのブランチ名を表示できるようにしておく。完成形はこうなる。 git-completion.bash 今回はこちらの記事を参考にさせてもらった。ちなみに
前回のつづき。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での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アプリで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+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を使うのに必
次のページ
このページを最初にブックマークしてみませんか?
『アインシュタインの電話番号』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く