このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか?筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。(CAATは、Canvas Advanced Animation Tookitの略) 「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
今まで、ブログを作っては消していた。AmebloやLivedoor、Blogger、他にも名前を忘れてしまったけど、今までどれも続かなかった。最初の3日間は頑張るんだけど、気づいたら放置。そんな人、案外多いのではないだろうか。 最近、ブログを書く人が以前と比べて増えてきているように思うし、ブログの重要性というものが高まっているように思う。ソーシャルメディアが普及しているからこそ、ブログというメディア兼コンテンツを持つことはかなり強い。事実、僕もこのブログを持っていることで色んな恩恵を得てる。Twitterだけじゃもったいない。 僕のブログは、Wordpressというものを使っている。WordpressとはカスタマイズできるWebサイトで、多くのブロガーたちが利用している。Wordpressの良さや利用するメリットは数多くあるが、最初の導入の敷居が高く、現に僕も一つ作るのに1週間以上かかった
HDDのパフォーマンスを通常より4倍から6倍引き出すことも可能なデフラグソフトが「UltimateDefrag」です。複数のデフラグ方法があり、スケジュール機能なども搭載しています。高速化の仕組み、インストール、操作方法は以下から。 UltimateDefrag - The Defragger For Power Users - Trial http://www.disktrix.com/UDFree.htm ◆高速化の仕組み 使用頻度の高いデータを全体の20%と想定し、そのデータをアクセス速度が速いディスクの外側(水色部分)に配置させ、使用頻度の低い残りの80%のデータをディスクの内側(黄色部分)に配置して、ディスクアクセスを高速化させるという仕組みです。これはパレートの法則にのっとって考えられています。 ◆インストール 公式サイトの下にある入力フォームにFirst Name(名)/La
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応 先週末に行われたWindows Azureの新機能を紹介するイベント「Go Azure」の基調講演の中で、Azure以外に興味を引かれたソフトウェアがありました。マイクロソフトが無償で公開しているWebサイト構築ツール「WebMatrix」の新版、「WebMatrix 2」です。 WebMatrixは、HTML/CSS/JavaScript/PHP/ASP.NETなどに対応したエディタ機能を備え、コード補完機能も搭載。ローカルにデータベースやWebサーバを用意してPHPの動作をそのまま確認したり、WordPressやDrupalなどのWebアプリケーションをローカルで試すこともできました。 下記はその画面(参考:マイクロソフト、無償のWeb開発
A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will
Webプログラムを手がける企業であっても,必ずしもWebデザイナが存在しているとは限りません。プログラマが自分でデザインを適用しなくちゃならないことも少なくありません。 技術者の人と会話をすると「僕にはデザインのセンスがなくてね」という自嘲的な発言をよく耳にします。しかし,Webデザインにセンスは必ずしも不可欠ではありません。ちょっとしたポイントを学習することで,誰にでもしっかりデザインされたページが作れます。HTMLとCSSによる実装を通して,デザインの基礎を学んでいきましょう。 第1回 Webデザインに必要なのはちょっとした知識と訓練 第2回 Webデザインの基礎はHTMLの構造にあり 第3回 文書を装飾するのはCSSの役目 第4回 Webデザインの基本を学ぶための環境について 第5回 HTML文書を装飾するCSSの基礎(その1) 第6回 HTML文書を装飾するCSSの基礎(その2)
表示領域の上部の位置を使用すると、ステータスバーの高さとなります。 [参考記事] 画面解像度などディスプレイの情報を取得する方法 [参考記事] タイトルバーやステータスバーを非表示にする方法 Rect rect= new Rect(); Window window= activity.getWindow(); window.getDecorView().getWindowVisibleDisplayFrame(rect); int statusBarHeight= rect.top; View view = (View) findViewById(R.id.view); Rect rect = new Rect(); view.getWindowVisibleDisplayFrame(rect); int statusBarHeight = rect.top; ただし端末によってはステータ
ステータスバーとタイトルバーに大きさを表示する。 現行では、ステータスバーやタイトルバーの大きさを取得する簡便な方法がありません。 従来の方法 ネットでは、下記のように計算する方法が紹介されています。 Rect rect= new Rect(); Window window = getWindow(); window.getDecorView().getWindowVisibleDisplayFrame(rect); int statusBarHeight= rect.top; int contentViewTop= window.findViewById(Window.ID_ANDROID_CONTENT).getTop(); int titleBarHeight = contentViewTop - statusBarHeight; if(titleBarHeight < 0){ t
タイトルバーの高さを何で変える必要があるのか? それは、右のような、ボタン付きのタイトルバーを作りたいときに、高さを増やさないと、ボタンが収まらないで、妙なあんばいになってしまうからです。 Android 3.0 - HoneyComb 以降であれば、タイトルは、Action Barという新しいスタイルになって、ボタンでも何でも簡単に設置できるのですが、GingerBread 以前では、タイトルバーをカスタマイズするしかないのです。 カスタムするだけなら簡単で、タイトルバーのレイアウトを記述したレイアウトを、タイトルバーに設定してやるだけです。 @Override protected void onCreate(Bundle savedInstanceState) { getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE); setC
Jelly Bean で AppWidget 関係にいろいろ手が入りました。 これまで 3rd party のランチャーに AppWidget を bind するには、AppWidgetManager.ACTION_APPWIDGET_PICK を呼び出して、AppWidget を選択する標準のダイアログを表示するしかありませんでした。 private void pickAppWidget() { int appWidgetId = mAppWidgetHost.allocateAppWidgetId(); Intent intent = new Intent(AppWidgetManager.ACTION_APPWIDGET_PICK); intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId); startAct
On-demand, automated testing service for Android and mobile web apps on real devices.On-demand, automated app testing. Test on real phones and tablets. Find issues before your users. Upload your app. Just drag-and-drop your Android app onto the site to securely upload it. Mobile web apps on multiple browsers coming soon! It automatically runs on real devices. AppThwack runs your app on real phones
少しでも時間を置くとすぐに忘れてしまう BitmapData#threshold について、いいかげん非効率も甚だしいんで、今ここで備忘録としてエントリー。 書式は以下。 public function threshold( sourceBitmapData : BitmapData, sourceRect : Rectangle, destPoint : Point, operation : String, threshold : uint, color : uint = 0, mask : uint = 0xFFFFFFFF, copySource : Boolean = false ):uint threshold() メソッドで押さえとくべきツボは何といっても第7引数 mask。 あと、その第7引数に指定した値によって、第5引数 threshold も若干の注視が必要になるってとこ
Canvasを使わないでドラッグアンドドロップする方法 Canvasを使わない利点 layoutをxmlでかける onDrawとか使わなくて済む どんなViewでも動かせる Viewのイベントを発生することができる。(アニメーションの連携とか) Viewを重ねることができる 重なったViewでイベントを発行できる(OnCLickとか) Tip FrameLayoutでVIewを重ねる ※実際他のLayoutでもできるけど、こっちの方が実装しやすい Viewの絶対座標はView#getGrobalRectで取得 TouchEventリスナーは動かしたいViewだけ実装 タッチポイントの絶対座標はgetRowX,Y Drag中の描画座標は前回の座標の差分を計算 Viewの表示位置はView#layoutで設定 ついでにこんなこともしてみる dropしたときにアニメーション res/anim/s
スマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか? 今回は、iPhone、Androidでアプリを提供しスマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか? 今回は、iPhone、Androidでアプリを提供しているサービスのUI設計の違いを比較してみました。 はじめに iPhoneとAndroidのアプリを比較してみたところUI設計には傾向があり、大きく3つのパターンに分類できることがわかりました。 実例を踏まえながらパターンを紹介していきます。※当然、例外はあります。 また今回はUI設計思考を見ているため細かいUIや
Flashは神。 正宗です。 Flash CS6を使ってFlashから簡単にiPhoneアプリを作る事ができましたので 、今回ハマったポイントなどを書いていこうかと思います。 簡単にiPhoneアプリを作る事ができたと言いましたが、 簡単というより、こう、普通に、普通にFlashを作ったらそれがそのままiPhoneアプリとして書き出された、という感じです。 なのでFlashに関して言えば特別なにか書くところがないくらい自然にiPhoneアプリを作る事ができました。これは凄い感覚でした。 ちなみにはじめて作ったアプリはこちらになります。 iDropCam iPhoneのカメラを通じてカラーのRGB値を割り出そうというアプリです。 仕掛けは単純なアプリですが使いやすいよう工夫してこしらえましたので、今月(2012/07)いっぱいは無料なのでよかったら使ってみてください。 AIRについてちょこっ
I like shortcuts: Fork BigText on Github or Check out the BigText Demo Wizard It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted
属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。 The amazing powers of CSS [ad#ad-2] 空のリンクを目立たせる 外部リンクを目立たせる 外部リンクのみアイコンを付与する PNG画像を裏返しにする head内の要素を可視化 デモ表示に使用している「Jsfiddle」はResultのタブをクリックすると結果が表示されます。 対応ブラウザはモダンブラウザで、一部Webkit系(Chrome, Safari)のみです。 空のリンクを目立たせる 空のリンクのみ背景:レッド、カラー:ホワイト、サイズ:大で、目立たせます。 外部リンクを目立たせる httpで始まる外部リンクのみ180度回転させます。 ※回転はWe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く