Archive for the ‘ 開発ツール・技術 ’ Category
いつかKinectはいじってみたいと思うのですが、なんだか便利そうなのが出てきたのでメモ的にエントリー。
SDK入れて、JS公開する読みこめば次のようなアプリが作れるらしいですよ。
↑ 40秒ほどの映像です。ジェスチャーでTwitterを操作していますね。
Twitterなんかの操作もいいですが、HTML5のゲームなんかでKinectつかえちゃったりしそうですね。まだリリース前ですがドキュメントは揃っているようですね。興味がある方はどうぞ。
» Kinesis | Welcome to Kinesis
公式サイトはこちらです。
» Kinesis – Simplest way to make web applications with gestures
なんぞこれｗ。
gitにコミットすると自動的にMacのカメラが起動、写真を撮ってメッセージとともに保存してくれるらしいです。
↑ 素敵ｗ。
スタートアップなんかでこの写真をアップするだけの開発ブログとか作ったら人気出そうですね。どこかやってみたらいいんじゃないかな！ｗ。
インタラクティブにWeb技術が学べるCodecademyに「HTML/CSS」のレッスンが追加されたようですよ。
↑ 自分でコードを打ちながら学んでいくことができます。
ただ、始まったばかりでちょいちょいバグがあるような・・・。もう少ししたら落ち着くのでは。ご興味がある方はどうぞ・・・。
» Web (HTML, CSS, JS) » HTML & CSS Overview | Codecademy
インタラクティブツールは作るのが大変ですな・・・と見ていて思ったり。
というわけで日本語＆動画でちゃちゃっと見たい方は是非ドットインストールをお試しあれｗ。
jQueryを30日で学習できる動画コンテンツが出来たようです。Tutsplusが仕掛けているようなのでクオリティ的には安心かな。
↑ こちらからメアドを登録すればOK。
↑ すぐに#1のレッスンのURLが届きます。10分〜15分の動画コンテンツらしいですね。
#1のレッスンを受けてみましたが、とっても丁寧な感じですね（ドットインストールははしょりすぎなのですけどね・・・）。
英語ではありますが、そろそろjQueryを・・・という方はいかがでしょうかね。
【追記】 ドットインストールでTwitter Bootstrapの使い方動画を公開していますよ。よろしければどうぞ！
愛用しているTwitter Bootstrap、遂に「version 2」になりましたよ。今まで「version 1.4」だったのでメジャーバージョンアップ！です。これは見逃せない、というか、感動した！
個人的に「おぉ！」と感じたところをざっと紹介してみるよ！（※ コメントが手抜きっぽかったので追記しました汗）。
↑ スマホ＆タブレット時代にこれは大事。
↑ これがずっと欲しかった・・・。あとはボタンのサイズがもうちょっと柔軟だといいですよね。
↑ こちらも待望の！スマホなんかでも十分に実用的になってきましたね。ちなみにボタングループっぽいチェックボックスもつくれますよ（iPhoneでよく見る奴）。
↑ 管理画面なんかで重宝しそう。
↑ いたれりつくせりすぎる・・・。
↑ これもいまどきのサイトで良く見ますよね。すごい！
↑ jQueryのプラグインとか探さなくていいですね。
↑ こちらも検索のユーザビリティを高めるのに大事。
↑ スクリプトを軽量化する際に使えるのでは、と。
HTML5を勉強するのもいいですが、もうなんつーか、これだけでいいような・・・。ドットインストールのレッスンも作り直したいぐらいの感動巨編ですよね・・・これ。すごいすごいすごいです。
詳しくは以下からどうぞ！ドットインストール本体もversion 2.0で作り直したいぞ、と。
先日Facebookに買収されたソーシャルQ&Aの「friend.ly」ですが、ヘッダーのアニメーションが気になっていたのでどうやっているのか調べてみました。
↑ こういう集中線状の背景がアニメーションします。
↑ 透過PNGをCSSアニメーションでぶんまわしていました。
↑ Inspectしてみた。
「overflow:hidden」にしておけば綺麗に表示されますね。「お、FLASH?」と思うような表現もCSSで実現できちゃう時代ですなぁ。
ま、それだけですがちょっと勉強になったので。どこかで使えそうです。
なんかいつも検索しているような気がするのでメモ的にエントリー・・・。
さて「1ピクセルへのこだわり」に関するエントリーいろいろです。神は細部に宿るので参考にしたいところです。
グラデーションの開始色と終了色でピクセルラインつくるってところが目からウロコでしたよ。必読。
いつもながら丁寧ですよね・・・すごい。基本から応用、豆知識からTipsまでざっと網羅されています。後半にいくほど参考になるし、読ませるエントリーです。
素敵サイトをひもときながら丁寧に説明してくれていますよ。効果がある場合とない場合の対比がとってもわかりやすい。
そしてさらに実践編まで・・・。Photoshopでごにょごにょしたい人は是非。
こちらは海外記事の紹介ですね。参考になります。
Web Designingで特集されたらしいですね。本文読んでいないですが、こちらの資料ページのサンプルも参考になるかと。
以上ですかね。他にも参考になるサイトがあれば是非教えてくださいな。
bitbucket、気になりますよね。無料でプライベートリポジトリが無制限です。5ユーザーまでですが十分ですよね。Github、個人的に好きですが、有料はちょっとね、という人はいかがでしょ。
↑ ちなみにbitbucketの料金プラン。
実験的にインポートしてみたので作業ログを公開。
↑ メニューのこちらを選択して・・・。
↑ こちらからインポートします。認証はGithubのメアド、パスワードを入れます。
↑ なお、リポジトリのURLはGithubのこちらのHTTPより。
↑ インポート中。ものによってはちょいと時間かかる。終わったらメールしてくれるので他の作業していてもOK。
↑ 出来た！
↑ Admin画面。Web Hooksがないのは痛い人には痛いかな。
↑ Issue Trackingもできますな。
↑ Wikiもね。
インターフェースや細かいところでまだ（個人的には）Githubに軍配があがりますが、機能的には十分ですね。小規模なベンチャーだったらこちらでいいような気がしないでもないですのぉ・・・。
というわけで気になる方は以下からどうぞ。
あ、あと細かいですが、ユーザー名は早い者勝ちなので、登録だけでもしておくと良いかと思います、はい。
あ、これやばい。vimをインタラクティブに学べるツールですよ。チュートリアルに加え、簡単なクイズや、vimが手元にない人でもいろいろ試せるサンドボックスがついています。
↑ チュートリアルがやたら充実しています。ひととおりやればばっちりですね。
↑ ミニクイズみたいなのもありますね。
↑ サンドボックスでいろいろ試せます。
vimはプログラマーの間で評価が高いですよね・・・。僕も含め、そろそろマスターしないとな・・・と思っている人も多いのでは。まずはこちらから試してみるのはいかがですかね。
» Open Vim
以前ご紹介したBootstrapですが、良い感じにマイナーバージョンアップを繰り返しているようです。地味にウォッチしていたのですが、本日、v1.3.0になってかなり使いやすくなったので再度ご紹介。
これが一番うれしいぞ！
以前はドキュメンテーションがいまいちで、完全に動作させるにはデモページのJavaScriptを解析して・・・なんてことが必要だったのですが、JSライブラリもがつんと拡充された模様です。
↑ これらをIncludeすればすっきり実装できます。
↑ Modalの実装例。こういうコード例やオプションなどがなかったのでかなり助かる！
こういうの欲しいなぁ、と思っていたスタイルも続々と追加されています。
↑ パンくずナビゲーションとか。
↑ ボタンの種類も増えた。
↑ こういうミニラベルも欲しかった！
↑ ダミー画像も公式サポート（ってほどでもないけど便利）。
さらにグリッドのカスタマイズまで出来ちゃうようです。940pxとかないわー、とかな人はがしがしいじっちゃってください。
↑ かなり柔軟なレイアウトが可能になりましたな。
いくつかのレイアウトに関してはちゃんとしたデモページができたようですね。ここらへんをコピペしてちゃちゃっと作っちゃうといいかもですよ。
↑ まだ数は少ないけど勉強になります。
なんだかバージョンアップが意欲的すぎて個人的には嬉しい限り。このままいくとResponsive Designにも対応しそうな勢いですね！（それはないかｗ）。
なお、後方互換性がいまいちだったりするので、ライブラリのバージョンあげてレイアウトが崩れたら地味にコードをみながら修正してみてくださいね（TopBarまわりのマークアップも若干以前と違いますな）。
驚くほど簡単に今風のサイトができてしまうのでこの連休中になんか作ってみるか！という方はいかがでしょうかね。ご利用は以下からどうぞ！
誠Biz.IDの「Webサービス図鑑」を応援中です！
