2011マツオソフトウェアブログソフトウェア開発に関連することを発信しています2011年12月12日月曜日ある特定の要素の上に読み込み中とかのくるくる回るスピナーを簡単に表示できるjQueryのプラグインある特定の要素をマスクしてその上に「読み込み中」とか表示したいという要件はよくあると思う。そんな要望に簡単に応えてくれるのが下記の素敵なプラグイン。jquery-loadmaskこんな感じ。デモはこちら使い方はいたって簡単。マスクしたい要素を選んでmaskするだけ。$("#mydiv").mask("読み込み中...");マスクをやめたいときは$("#mydiv").unmask();もちろんこんなこともできる。HTML5を読んでの感想HTML5で何がどう変わってどういう機能が追加されたの?、というのを程よい解説とサンプルつきでほぼ網羅できる良書。HTML5がモリモリと大人気なのでこのビッグウェーブに乗り遅れるわけにはいかない、というわけで本書を手に取ってから長いこと積んだままになってて結局乗り遅れた感じになっていたのだけれども、ついさっきざっと全編目を通したのでその感想を。editionが出ていたのでそちらへのリンクとなっている。editionのもの。1~3まではHTML5は強烈にセマンティックWebをサポートするぜい!ということで導入された新しいタグとか使い方の説明でほーって感じ。id='footer'>フッター的な何か</div>こんな風になんでもかんでもDivでやるのではなく<footer>フッター的な何か</footer>ちゃんとタグそのものに意味を持たせようという動き。socketでブラウザベースのオンラインゲームを作ったりしたいと思っている人には、充分それのとっかかりになる部分は得られると思う。書籍JavaScriptで何かをエンコードしてサーバへ渡すときのエンコード方法JavaScriptでサーバに値をPOSTするなりGETのパラメータとして渡すなりするときのエンコード方法として下記の3つがある。encodeURIencodeURIComponentescapeで、よく何使えばいいんだっけ?と忘れるので備忘録。encodeURIURLをエンコードするのに使用する。下記を実行するとencodeURI("http://www.chinu-kakariduri.com/Shop/Details/小浜漁協釣り筏");下記になる。http://www.chinu-kakariduri.com/Shop/Details/%E5%B0%8F%E6%B5%9C%E6%BC%81%E5%8D%94%E9%87%A3%E3%82%8A%E7%AD%8FencodeURIComponentURLのパラメータをエンコードするのに使用する。encodeURIComponent("http://www.chinu-kakariduri.com?p1=chinu&p2=kakariduri");下記になるのでhttp%3A%2F%2Fwww.chinu-kakariduri.com%3Fp1%3Dchinu%26p2%3Dkakariduri次のようにしてURLをURLのパラメータとして渡すことが可能になる。"&p2=chinu";escapeつかわなーい。いうのもescapeが出力するエンコーディングはW3C標準ではないのでサーバ側で正しく処理できないことが多く苦労するので使わないほうがよい。クライアントだけでエンコード、デコードする用途があるならありだと思う。JavaScript2011年11月27日日曜日ねじをなめてしまったときの対処法ラップトップのメモリを換装しようと裏蓋をあけるためにグリグリとやっていたらねじをなめてしまい、まったくもって回らなくなったねじとこの世をはかなんでいたのだけれど、こんな便利グッズを使ったらあっさりと回って無事メモリの換装がうまくいったので紹介しておく。つぶれてしまったねじに対してドライバーをあてて、そのお尻のほうをハンマーでコツコツとたたき、むりくりかませるという方法でまわす。今回はハンマーを使うまでもなく、普通に力をこめながらまわしたらあっさりととれた。サイズが複数あるので購入する際は注意していただきたい。一応上記のドライバーで上手くいかなかったときように滑り止め液も購入していたけれど、今回はまったく使用する機会がなかった。ねじ2011年11月18日金曜日PythonプログラムからPOSTなりPUTしてみるPythonプログラムからデータをPOSTなりPUTしたいときのコードスニペット。PUTするために強引にget_methodを上書き。PythonC#プログラムからPOSTまたはPUTしてみるC#のプログラムからデータをPOSTなりPUTしたいときのコードスニペット。Serverを使う上で知っておくととても便利なコマンドやらクエリやらをとても分かりやすく大量に説明してくれている。browserブラウザ上でJavascriptを使ってゴリゴリとWebアプリが作れちゃう。Node.jsNode.jsでブラウザベースのゲームを作ったお話。1すごく分かりやすいゲームプログラミングにおける線形代数のお話。cloud?EC2にまつわるちょっとした考察。論点が簡潔で読みやすい。DESIGNERSCSSをSassとCompass使ってコーディングしようぜー!っていうお話。Scriptと一緒に評価したいと思ってる。VirtualBoxにはなかったので、今回はその設定方法の解説をする。UbuntuをVirtualBoxにインストールする。※UbuntuをVirtualBoxにインストールする方法は適当にGoogleしてください。見つかると思うし、至極簡単なので問題ないと思います。下図のようにVirtualBoxの設定でディスプレイのビデオメモリをちょっと多めに設定しておくのと、拡張機能で3Dアクセラレーションを有効化しておくのを忘れないように(本当に必要なのか実は良く分かっていない)。Unityが有効になっていない場合は、起動時に「ハードウェアの要件が満たされていないからUnity使えないよ」みたいな警告ダイアログが表示されると思う。その警告は無視してUbuntuにログイン後、Terminalを起動し、下記コマンドを実行する。update次いで下記コマンドも実行する。virtualbox-ose-guest-utilsこれでUbuntuを再起動するとLauncherとBashが使えるようになっているはずだ。72011年9月27日火曜日2011年9月の記事いろいろプログラムdeck.js新しい表現方法を提供してくれるフレームワーク。JavaScript3Dっぽい動きをCSSに簡単に付与できるようにしてくれるjQueryプラグイン。デモを見てもらったほうが早い。ServerでなんでもかんでもGUIDを主キーにしてたらすぐにDBがメンテナンスできなくなるよ、って話を計測データ付きで説明してくれている。初期状態で主キーはクラスタ化インデックスになっちゃうし、非クラスタ化インデックスにもクラスタされたキーは付与されるので、GUIDのキーが当たり一面にひろがっていってレガシーデータが大量になってきた場合ににっちもさっちもいかなくなっちゃうぜー、という怖いお話。2Html5のゲームをプログラムを書くことなくさくさくと作れちゃうすげーツール。これならデザイナーの人とかほんとさくっとゲーム作れちゃうね。tag"ワロタw昔メタタグがすごく重要だ!とか言って大量にキーワードを設定してる人がいたなぁ。1文字サイズの取捨選択について。aクッソワロタwあんだけリボンUIを押してるMSなのに全然使われてないwwみんな大好きコンテキストメニュー。address何か登録した後とかにメールで確認するシステムというのは多いけれど、その際に「メールアドレスの確認」みたいなSubjectにするよりも「メールアドレスを確認してください」と何をするかを明示的に説明されているSubjectのほうが登録完了まで行うユーザの割合が多いというお話。steps)ブランディングとか情熱的な~のようなあいまいとした言葉を多用して相手を煙に巻くデザイナーではなく、デザインの結果としてどのような効果があってそれがどのような成果に結びついたのかを明示しているデザイナーこそ雇うべきというお話。writing誰に向けて書いてるのか、ってのが一番重要なんだよね。すいません、毎回書き散らしてました。Naps?昼寝したほうがいいよねって記事。いつも昼食後30分ぐらい寝るようにしてる。仮眠をとると午後眠たくならないから健全な精神状態で働ける。名前付き引数のすすめ仕事でVB.NETとJavascriptを使い、自分のプロジェクトではC#とJavascriptにPythonと使っているのだけれど、プロジェクトをスイッチさせたときに頭の中のSyntaxがごちゃごちゃになっててスラスラと書き始めるまでしばらく時間がかかったりする。そのせいもあるのか自分のコードを忘れる時間も早くなっている気がする。先日、自分の組んだJavascriptのコードに機能を追加しようと眺めていたら下記のようなコードがあってハタと手が止まってしまった。$('.class').disable(true);・・・disableにtrueってなんだろ?有効、非有効の表示を切り替えるためにjqueryのpluginを作ったのまでは覚えているけれど、その引数の意味が思い出せない。見て類推できるのは、disableにする、しないのフラグかなと思ったのだが、enableというpluginも用意したはずなのでそれは当たらない。分からないのでpluginの実装を見たら下記のようだった。}}ということであのbooleanはdisableついでに値も消去するかのフラグだった。Studioのインテリセンスがすぐにどういう値なのか教えてくれるし、PythonにしてもPyDevなどがあればDocumentが表示されるので簡易に分かったりする。StudioでJavascriptのインテリセンスを使用するためにはReferenceタグを各ファイルに追加しなければいけなかったりと若干面倒だったりするので、Syntaxとして名前付き引数が用意されていないJavascriptで、コードを用いて同じ機能を実現しようとするならば下記のようになる。}}これでコードの可読性はあがったけれど若干冗長なのは否めない。冗長だからという理由だけで、常にBoolean、Integer、Stringなどのプリミティブな値を定数としてそのまま引数として渡すのは、コードを管理していく上で良い方法だとは思わない。メンテナンス性の向上というコンボになるので、上記のような状況では名前付き引数を使用するのが良いだろう。蛇足ながらそれぞれの言語で名前付き引数で上記のシグネチャの関数を呼び出すと以下のような感じになる。FormのノリでイベントドリブンなWebアプリを作っちゃってWebの基礎を良く分からずに来た人などはとくに手にとっておいて損はない本。RESTなどなど現在のWebを取り巻く状況を満遍なく解説してくれている。DELETEの存在意義だったり使用方法を見て「おぉ、そうなんだ」というAhaモーメントがあると思う。Webサービスを設計する場合のとても良い指針になってくれると思うので勉強になった。HTTPRESTについて。AuthenticationWebの認証についていろいろ。目を通しておくだけでも価値がある。RulesjQueryのセレクターで最も速いのはid指定で、ついで速いのはタグ名指定。いうのもそれぞれgetElementByIdとgetElementsByTagNameに対応しているからで、セレクターを記述するときはそのことを念頭に置いたほうが良い。その他jQueryを使い始める前に一度は目を通しておくべきパフォーマンスについてのTips多数。box2dwebすごすぎワロタwBox2Dっていう物理エンジンをJavascriptにポートしたプロジェクト。Quiz面白すぎwC#に腕に覚えがある人はやってみるべき。まじで!?なんで!?ってなる質問が一つはあると思う。spin.jsスピナーを動的に作っちゃうJavascriptライブラリ。leaksChromeを使ってのブラウザアプリのメモリリーク発見法。All...アーキテクトって職種にとくに興味はないんだけどアジャイル開発やるときのアーキテクトってなにやってんの?という質問の答え。checklist事前にこんだけチェックしとけばとりあえず大丈夫だよ、っていうWebサイトリリース前のチェック項目。バックアップテストとか耳が痛い。before-and-after)無難なデザインに落ち着いていたのがプロデザイナーをやとったらこんなにお洒落なデザインに変わったよ、見てよ。いう6箇所のビフォーアフター解説。Eyes丸っこいデザインがはやってる理由。pennyお金を使わずにスタートアップをどうやって宣伝するの?っていう方法。右も左も分からんときに役立ちそう。Experiment立って仕事したら最初は疲れるけど2~3週間したらまじで元気になってくるよ、というお話。今のプロジェクトが終わってまた自宅作業するようになったらちょっとトライしてみようと思ってる。Nearbyなんでガススタってかたまってんの?というお話。分かりやすくて、読んだ後でおぉそりゃそうだな、と合点がいく。worried?画像の解説が異常に分かりやすくて、頭にスコーンと入る感じ。大規模サービス技術入門でも解説されてたけどね。WORK総合するとユーザセントリックであるべきだよね、ってことかな。競争相手とか、新しい技術とか、新しいものとか、使い勝手とかよりまずはユーザを見ようぜって。3Dなんか複雑そうなサイトとか見るときに使ったりするとむふふとなる。デザイン系のサイトで、なにこれ、どうなってんの?ってサイトに使うと、おぉってなる。Frameworks最近のフレームワークって複雑なのが多すぎるんだよね。Engineぐらいシンプルでよくて、なんでも乗っけられるようになってるのが一番いいよ。time好きなことを仕事にするのが一番幸せです、ということで。projectとかでやりたいことをがっつり試したりすると精神が昂揚しますよ。Too)はじめにとにかく色々想定して作りこみすぎると無駄になることはままあることで。重要なことは作りこんでいたとしても明らかに「こいつぁ無駄だな」って分かった時点でばっさり切り捨てる決断ができることだと思うんだよね。Questions面談時に「何か新しいことを思いついて開発に取り入れたことってありますかね?」という質問をしたり、されたりしたらその人やらチームやらの性質がよく分かるよ、というお話。自分にしてみたところ、ね(無)ぇ!!何か新しいこと発明したこと、ね(無)ぇっ!!何か新しいことを取り入れるのは大好きだけど、これのパテント(英語発音:パァトゥントッ)おれなんすよ、みたいな小話は、ね(無)ぇっ!!いやー、これは盲点でしたね。自分の開発サイクルをかんがみるに、やっぱ新しいものに常に触れていたいってのはあるから、そういう土壌のある場所に常にいたいなとは思う。見積りってどうやるのが業界標準なの?と長年疑問に思っていたので「ソフトウェア見積り―人月の暗黙知を解き明かす」を手にとって見た。プロジェクトの工数見積りって要件もざっくりとしか決まっていない時点で6ヶ月で納品とかよく算出されるけれど、以前から「これってみんなは何を根拠に出しているのだろう」と前々から疑問に思っていた。自分の場合は、ほんとにざっくりとこんな機能がいるよね~、で、この機能は大体5日~、10日~、のような感じで算出するのだけれど、これってほんとあいまいだなぁ、と常々考えていた。そんな不安な思いを打ち消してくれる役立つ内容てんこ盛りだった。中でも自分的になるほど~と感心した点を以下にまとめておく。不確実性のコーンプロジェクトの初期では要求さえ明確ではないので正確な見積りを行うことがほぼ不可能で、その振れ幅は4倍~0.25倍にもなる。詳細設計が完了する段階までくるとその振れ幅は1.25倍~0.80倍になり、それ以降もプロジェクトの収束に向かって見積りの正確性は向上していく。