Born Neet

それ、セレクタで。

皆さんCSS3使ってますか？

僕は、box-shadowとtext-shadow、borderradiusはたくさん、transitionやanimationはそこそこ、セレクタはあんまり使いこなせてないという感じです。

css3になって、せっかく便利なセレクタが増えたんだからもっと活用したい！
確かにclassやidは便利ですが、本来html文書の意味的には不要なものなので最低限にするのが望ましいですよね。
本当にそのclassやidは必要か、ということは常に考えておきたいものです。
（例えばcss3を使って良いサイトなら、昔ながらのodd/evenではなくnth-of-typeでやれば良い、とか）

…というわけで、cssのセレクタの勉強がてら、class/idなし縛りでページを作ってみました。

Tatsuya Tobioka in 2012.

僕の2012年のプロダクトを載せるポートフォリオです。（まだ2つしかないけど）

htmlを見てもらえればわかりますが、id/classは使ってませんが、そこそこアニメーションとかできてますよね。
jsもシンプルです

その分cssがぐっちゃぐちゃですが。1年間保守するのはとてもしんどそうです。

また、emとstrongの使い方にセマンティック的な誤りが出来てしまっています。
（span class="highlight"、li class="current"で済むところを無理やりクラスを使わずやった為。）

今回は実験的な極端な例ですので、その他にも問題があると思います。
というわけで、もちろん、皆さんにこんなことをオススメするわけではありません。

ただ、css3の時代はすぐそこです。classやidの付け方、一度見直してみてはどうでしょうか？
無駄なものが結構あるかもしれませんよ？？

デザイン楽しい！

本題からは逸れますが、このサイト、僕のデザイン処女作です！
昨年末から、デザインもできなきゃ食いっぱぐれる！と勝手に追い込まれて勉強してたんですが、今回ようやくFireworksを使って自分でデザインするという作業を初経験をしました。
まだまだデザイナーには程遠いですが、今までに比べれば幾分マシになったんじゃなでしょうか。

そして何より、全てを自分の手で創り上げる感じはとても良い！
ということで引き続きデザインも頑張っていきたいと思います。
（勉強した内容も記事にしてみたいです。）

あ、デザインのダメだしがあったらしてもらえると鼻血が出るほど助かります。
デザインを公開しておいて簡単に問題指摘＆修正できる仕組みないのかなー。（GitHubみたいな）

それでは。

デザインで迷ったところ

こういうのもオープンにしていった方がいいと思ったので追記（2012/2/13）。

一つ目は、赤を#f00ではなく、金赤というやつにするか。
印刷界？では金赤というのが結構使われててオーソドックスなんだそうだ。けど、どう見てもcolor: orange;にしか見えなくててオシャレじゃなかったのでやめた。

もう一つはコンテンツを表示している正方形を#dddぐらいのボーダーで囲うか。
これは最後まで迷ったけど、何となく正方形が見える今の感じの方がおもしろいと思って付けなかった。

はじめに

お久しぶりです。

いやぁホントに最近はブログ書けてませんね。
アウトプットが大事なのは理解しているつもりなのですが、どうしても読書やプログラミング自体に時間を使ってしまい、その結果を記事にするのが疎かになってしまいます。

ただ、元々文章を書くのは好きだし、ゆくゆくはそういう物書き的なお仕事も是非していきたいと思ってるので、今年は心を入れ替えて定期的に更新できるように頑張りたいと思います。

というわけで、今日は久々にObjective-Cのお話です。

なお、ウケるブログを書くための21の発想法に、”多くのブログ投稿は、ミニチュアの教科書のようだ。”という言葉があってめっちゃ納得したので、今回は若干チャラい文体になっております。予めご了承下さい。

それでは、始まりまーす。

※ 「続きへ」は嫌いなので基本やらないんですが、今回長文になりすぎたのでブログのサイズ制限に引っかかったので途中（前フリと本題）で分けてます、ごめんなさいm(_ _)m 全文はこちらにあります

なぜ、今macアプリなのか。

皆さんはEvernoteやDropbox、使ってますか？
使ってますよね、僕もとてもお世話になっています。

では、evernote.comやdropbox.comにアクセスしてますか？
…あまりしてませんよね。
せいぜい他の人のコンピュータで作業しなきゃいけない時ぐらいでしょうか。

つまりはそういうことだと思います。

HTML5や第2次ブラウザ戦争等によってクライアントJavaScriptはすごい速度で発展しています。
しかし、当然ながらネイティブアプリに追いつくのはまだまだ先でしょう。

僕自身もJS出身のプログラマですから、Web技術で全てを書けるのが理想ではあります。
しかし、ユーザにとってそんなことは関係ありません。

少なくとも現時点で、より使いやすいものを提供するためには、ネイティブアプリのノウハウを積むことの方が近道なんじゃないか、というのが最近の僕の考えです。
（GoogleのNative Clientすげぇってのはありますが、あれも結局Web技術じゃコンテンツ作れないですしね）

ごちゃごちゃ書きましたが、単純に、次作りたいものを考えてた時に、どうしてもBookmarkletかブラウザ拡張の力を借りないといけなくて、UX的にそれはないなぁと諦めてMacアプリの勉強を始めたという次第です。

pathとかflipboardとかもそうだけど、アプリメインで成り立ってるサービスが流行ってるから洗脳されてるんじゃね、と言えばそうかもしれません。
まぁいずれにせよ自己暗示は大切です。

なんでiOSじゃないの？

個人的なニーズによるものです。
次作りたいと思ってるものが、キーボードをガシガシ打って使うユーティリティツールなので、iOSではやっぱりまだ厳しい。

あと、入門記事的な観点で言うと、Objective-C初心者にはmacアプリの方がお勧めできると思っています。
というのも、macアプリは、iOSシミュレータを挟まない分、コンパイルから実行までが早くて開発がスムーズです。そして、シミュレータ絡みのわけわからんエラーに悩まされなくても済みます。

それに、App Storeを経由しなくても自由に配布できるので、公開のハードルが（金銭的な面も含めて）ぐんと下がるというメリットもあります。

今日作るもの

ソフトウェア開発に欠かせない、カラーピッカー（スポイトツール）を作ります。

macには標準で“DigitalColor Meter”というソフトが付属していますが、なぜかLionになってから、16進数表示が削られてしまったのです。
Mac App Storeに色々あるけど有料が多いし、無料のはイマイチ使い勝手がよくありません。
そんなに真面目に探してないので良いアプリもあるのかもしれませんが、なぜデスクトップ上にある色を知りたいだけなのにそんな手間をかけなきゃいけないんでしょうか。

「文句があるならお前が作れば？^※1」

全くですね。じゃあ作りましょう。

※1 余談ですが、（特に日本の）エンジニア達は、いざとなったらこの言葉を言う資格がある、ということを胸に留めておくべきではないでしょうか。ものづくりをできるあなた達は、もっと偉いはずです。

まずは名前から

名前が決まらないとXcodeのプロジェクト名が決められません。
この名前はクラス名とかにも使われちゃうので後で変えるのは大変面倒です。

今回はマウスで色を取得するアプリなので、これらに関連する単語から名前を考えてみます。

適当で良いのでダジャレで、かつ、そうですねぇ、最近和の響きが好きなので…
…ColorClick、略して、“カラクリ”にしましょう。

予習と環境

私は以下の本で学習しました。
（アフィリエイトリンクが嫌な人はぐぐってね☆）

といっても、初めの50ページぐらいこそコードを打ちながら真面目にやりましたが、途中から飽きて流し読みしました。まぁその程度です。
なお、原著は既に第4版が出版されていますので、英語を読める人はCocoa Programming for Mac OS Xを購入する方が、安いし情報も新しくて良いでしょう。（当然、Kindleならもっと安いです）

環境は、Mac OS X 10.7.2、Xcode 4.2.1です。
Xcodeが入っていない人は、Mac App StoreからXcodeをダウンロードして、Install Xcodeを実行して下さい。（XcodeはDL→Installと何故か2段階になっています。）
※ バージョン4.3から、直接インストールされる構成に変更になったようです。なお、サンプルは4.3でもBuildできることを確認しています。(2012/3/6 追記)

なお、Macアプリに使うフレームワークはCocoaといいます。
開発中は特にCocoaという名前を意識しませんが、ハマった時に、Cocoaという単語を入れて検索したほうが引っかかってきやすかったりするので覚えておいて下さい。
（ちなみにiOSの開発にはCocoa Touchを使います。）

Continue reading

遅くなりましたが、あけましておめでとうございますm(_ _)m

正月はもちつきもいいけど、ものづくりにも最適ですよね。

というわけで毎年何かしらのプログラムを作るようにしてるんですが、
今年も無事、公開にこぎつけることができました。
※ ちなみに昨年はlooseleafjsというNode製のブログエンジンを作りました。

commiline

このサービスは今チャレンジしていることを入力すると、facebookのtimeline用のカバー画像を生成する、という（だけの）ものです。

画像はもちろん850×315なので、ダウンロードすればそのままfacebookに設定できます。 またチャレンジ内容は同時にfacebookのwallにも投稿され、commitlineのサイト内にも表示されます。

そろそろ正月気分も終わりの時期ですし、facebookのタイムラインで是非皆さんのチャレンジを宣言してください。

そんな宣言できるほどのことはしていない…？
社会に閉塞感が漂い、日々漠然と生きてしまいそうになる中、何か少しでもやろうと足掻いているだけで立派だと、僕は思います。

• プログラミング … Yes, off course!
• ジョギング … Good!!
• お絵描き … Cool!!!
• 募金 … Wonderful!!!!

ほら、簡単でしょう？

Proud Your Challenge
― あなたの取り組みを誇って下さい。

バグとかあったらtwitterとかでお知らせいただけると嬉しいです。

それでは、enjoy challenging :-)

タイムラインの有効化

まだ旧プロフィールページを使っている方は、タイムラインのご紹介に切り替え可能です。

参考）Facebookタイムラインを適用しよう：変更方法と使い方まとめ！（深谷歩） - BLOGOS（ブロゴス）

1週間ぐらい整理（？）した後・・・とか言われますが、強制的に有効化することもできます。
※ 僕は待ってられなかったのでそうしました^^

ほんのちょっとだけ技術的なお話

Rails3.1

今回、rails3.1と仲良くなろうが一つのテーマだったので、coffeescript, scssも食わず嫌いせずに使ってみました。
一番良かったのは、cssの文法エラーがrailsエラーになること。
しょうもないタイポとかで無駄な時間を食わずに済む。これは良い。

coffeescriptは確かに短く書けていい感じですが、まだ脳みそがjsと混同してスムーズに書けてないので評価できる段階じゃないです。
ただデバッグは結局js見るのでjsは引き続き勉強しましょう。

何はともあれ、やっぱrailsは便利。

Design

デザインは現在絶賛勉強中ですが、まだまだスキルアップした気はしていません。
全ては模倣から始まるということで、今回は、Timeline WPと本家facebookを参考に、僕の好みとスキル(パクリきれなかった部分が多々あります…)に合わせて変更したものを利用させていただきました。
怒られたら変えようと思います。

Photos

写真は0501さんからお借りしました。
素晴らしい写真がいっぱいです。
特に人の写っている写真が素敵すぎます！

Post github?

今更Bitbucket使ってみたら無料でprivate repo作れて超いい感じでした。
github卒業するかもです（いいすぎ？）

Logging

仕事のプログラミングは工数云々あるので時間を意識するんですが、ホビープログラミングはついついだらだらしちゃいますよね。
というわけでTogglでログりながらやりました。
新幹線で移動しながらとか、実家のリビングでテレビ見ながらとか遅延要因はいろいろあるにしても、27時間ぐらいかかってて引きました。
ハッカソンとかの速度を見てると、やっぱり12時間程度でひとつのものを作り上げられる力が欲しい。
togglは便利でしたが、この目的のためにはベストではない気もしたので、いろんなツールを試して行こうと思います。

*book

ホントはcommitbookにしたかった（というかプロジェクト名とかはそれで始めちゃってたんですが）、*bookという名前はfacebookのポリシー違反でapp登録できませんでした。
うーん、ちょっと名前空間広すぎない？w

まとめ

とりあえずミニマムでスタートなので、改善できるところがあればアップデートしていきたいと思います。

それでは、今年もよろしくお願いします！ ！

という気が最近してきた。
今まで、無駄なタグが挿入されるのとかが嫌で、
taggetとか作ってきたわけですが、ちょっと気が変わってきた。

たかがブログの投稿とかの中に、<br />の連続や、空の<p>があったところで、ダメージを受けるクローラやブラウザがどれだけあるのか。
むしろ、手打ちして閉じタグ忘れたり、HTMLをろくに知らない人が適当に書いちゃったものの方がよっぽど問題があるんじゃないか、と考えるようになってきました。
そもそも、WYSIWYGエディタが変な結果を吐くなら、それを使うのをやめるんじゃなく、直すのがGeekでしょっていう。

僕自身、ちょっと最近ブログを書く時など、手打ちがしんどくなってきちゃったというのもあります。
そんなことより人間は文章の内容の方にこそ凝るべきでは、と。
（WYSIWYGな人達はそんなこととっくの昔に気づいてたんだろうけど。）

というわけでlooseleaf.jsは0.4からWYSIWYGエディタに変更する予定です。
（一応設定できるようにして、最近気になってるmarkItUp!も選べるようにしようかなとも思っています。zen-codingの方が良いかな？）

昨日社内でHTML(一応5)のプチ勉強会をやったので、資料を一応公開。

当日作った資料＆超入門ということでかなり省略している部分や不正確なところもありますのでご了承下さい。

いやー社内勉強会の資料をブログで公開できるとか超幸せ！

HTML5 超入門

おまけ

今回HTMLのプレゼンツールを使ってみようと思い、一番良さげだった、deck.jsを使って見ました。
勉強会中ローカルのサーバにアップして、資料からソースをコピペしてもらうようにしたので、間違いがあった時、リアルタイムで直して更新とかできたのが便利でした。
ただ、資料作成という観点ではやはりkeynoteとかの方が断然早いっす。
（HTMLで書くのは時間かかる…）

適材適所ですね。