Category: 特別記事

CSS3
winmonaye

Retinaディスプレイ対応のレスポンシブなメニュー

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナル記事へのリンク 3つのレイアウトで様々なブラウザ画面サイズに対応する、レスポンシブでタッチフレンドリーなRetinaディスプレイ対応のメニュー作成方法 今日は、ボーダーランズ(Borderlands)ゲームの武器メーカーMaliwanが打ち出す様々な色からインスピレーションを得た、多彩なRetina対応のレスポンシブなメニューを作成していきます。このメニューはブラウザのウィンドウサイズに合わせ、自動で次の3つの異なるレイアウトのうちの1つに変化します。「デスクトップ」向けの横1列表示バージョン、タブレット向けに最適化された縦2列表示バージョン、そして最後は、ナビゲーションを表示/非表示するためのメニューボタンを備える、より小さな画面のモバイル向けのバージョンです。 メニューを完全Retina対応とするため、アイコンフォントを使います。アイコンフォントを使うと、リサイズ時にメニューのアイコンの品質が低下する(ボケて滲んで見えたりする)ことがなくなります。 個々のCSSプロパティをサポートするブラウザ上でのみ実現される効果もありますので、ご注意ください。 アイコンフォントを準備する 独自のアイコンフォントを作るというと少々面倒な感じがするかもしれませんが、IcoMoonなどのツールを使えば、要はアイコンを作ってそのツールにインポートするだけです。アイコンフォントは他のあらゆるフォントと同様に機能するため、色の変更やサイズの指定が簡単にでき、品質が低下することもありません。異なる画面の解像度に合わせてアイコンを用意する必要がなくなり、Retina対応デバイスに最適です。 まず最初に、メニュー用のアイコンを作る必要があります。私はイラストレータを使いますが、例えばInkscapeなどのベクタグラフィックスエディタであればどれでも構いません。アイコンをそれぞれ作成したら、それら一つ一つをSVGファイルに書き出します。アイコンをあらゆるブラウザで適切に機能させるためには、各アイコンごとに、すべてのラインを完全にオブジェクトに変換し、それらのオブジェクトをすべて統合して1つの大きな形にする必要があります。すべてをSVGファイルに書き出したら、それらのファイルをIcoMoonアプリケーションツールにインポートします。 IcoMoonから提供されている膨大なライブラリのアイコンを使って、作成したフォントの見栄えをさらに良くすることもできます。必要なすべてのアイコンが揃ったら、ページ下の「Font」ボタンをクリックし、詳細設定のページに移ります。このページでは、エンコーディングの設定を選ぶことができるほか、各アイコンに文字を付けるかどうかの選択や、Private Use Area(画面を見た第三者によるアイコンのアウトプットを禁止する)を使用するかどうかの選択ができます。私個人としては、デフォルト設定での使用をお勧めします。それで十分機能するからです。 「Download」をクリックすると、4つのフォーマット(SVG、EOT、TTF、WOFF)のファイルがまとめられたZipファイル1つと、CSSファイル、デモページが生成されます。 アイコンを使えるようにするため最初にしなくてはいけないのは、IcoMoonから提供されたCSSをコピーして、自分のCSSファイルのトップにコピーすることです。また、フォントフォルダをコピーするのも忘れないようにしましょう。「a little “hack” to make fonts look nicer on Chrome Windows」も併せて読まれることをお勧めします。 メニューのHTML 今回のナビゲーションのHTML記述は以下のような感じです。 アイコンフォントを使うため、「icon-iconname」クラスをi要素(span要素でも同様に機能します)の中で用います。また、no-jsクラスをbodyに追加していますが、Modernizrを使った場合にはこれはjsとなりますので注意してください。これは、ユーザがJavaScriptを無効にしていた場合にメニューを開いたままにしておくためのものです。 CSSとJAVASCRIPT ここでは、CSS3プロパティにベンダープレフィックスを付けませんが、ファイルの中にはベンダープレフィックスが付いたものがあることに注意してください。 すべての画面サイズに適用されるグローバルCSSは次のようになります。 最初に、ナビゲーション全体に対してちょっとしたトランジション効果を追加してみます。ホバーされているものを除き、その他のすべてのアイテムの不透明度を下げるというものです。 次に、すべてのアイテムに対してちょっと素敵な感じの背景色を追加してみたいと思います。以下の記述では、リストアイテムを選択するのにnth-childを使っています。これで、好きなだけリストアイテムを追加でき、色指定のコードも追加した分だけ繰り返し実行されます。 Media QueryのMin-width属性を使うことで、800px(50em:bodyのフォントサイズが15pxで)よりも大きい画面を対象として、リストを横一列のナビゲーションに変化させることが可能になります。 継続してnth-childの選択テクニックを使い、メニューアイテム毎に異なる色を持つ4pxのボーダーを追加します。このテクニックを:hover疑似クラスに適用するだけでなく、タッチデバイスやキーボード・アクセスにも対応できるよう:focusと:active疑似クラスにも適用します。 次に、アイコンとテキストを配置します。 ホバー時にアイテムの高さをアニメーションで変更するよう設定します。 次にアイコンの配置位置を指定し、かつアニメーションによる高さの変更にも対応できるようにします。 視覚的な効果をつけるためにボックスの影をアニメーションで表示し、その影のサイズを0.8emから0に変更、また色も透明からより不透明度の高い色へと変更します。ここで最初のmedia-queryを閉じます。 ここで2つ目のmedia queryを使って、800px~980pxのサイズの画面向けに若干調整を施します。 これで「デスクトップ」バージョンの設定が終わり(1024px以上の画面を持つタブレットが続々と出てくる今日、その辺について大きな疑問をお抱えだとは思いますが)、800pxより小さい画面(ここでは49.938emに相当)用に、media query のmax-width属性を使って「グローバル」CSSの処理をします。 520px(32.5em)~799px(49.938em)のサイズの画面には、2桁3行のレイアウトのメニューを表示するようにします。ユーザーが各アイテムを容易に「タップ」できるようにパディングを追加し、また、アイコンを左側、テキストを右側に表示させるようにします。 大きな画面用のアニメーションを小さい画面にフィットさせるのはかなり厄介なため、より簡単かつ慎重なやり方でボーダーをシンプルに表示させることにします。ここでmedia queryを閉じます。 ここで再度、より小さな画面用にフォントサイズと幅を指定します。 非常に小さな画面についてはナビゲーションを非表示にしておき、ユーザがクリックするとナビゲーションを表示する「メニュー」ボタンを表示させるようにします。JavaScriptのコードでこれを実現します。 HTMLをすっきりさせるために「メニュー」ボタンを作り、JavaScriptを使ってDOMツリー内に挿入するという方法を取りました。changeClassファンクションにより、ユーザがボタンをクリックした際クラスがactive/クラスなしの間で切り替わります。 小さい画面向けバージョンのために必要なものがすべて揃ましたので、以降CSSでスタイルを指定していきます。以下は、メニューボタンのスタイルを指定する記述です。 デフォルトでメニューボタンは非表示になっています。サイズが519px (32.438em)以下の画面向けには、このボタンを表示させることにします。 ボタンがクリックされると、ナビゲーションの高さをアニメーションで変更するように指定します。ナビゲーションを閉じるときのためには高さを0em、開くときのためには最大の高さとして30emを指定します。JavaScriptが有効になっていない場合には、ボタンが表示されないため、no-jsクラスを使って常にナビゲーションを表示させるようにします。 JavaScriptが有効になっている際には、デフォルトでメニューを非表示にしておき、ユーザがボタンをクリックすると(activeクラスを取得し)表示されるようにします。 より小さなサイズの画面には、アイコンを左側、テキストを右側に持つアイテムから成る縦1列のリスト形式でナビゲーションを表示させるようにします。 素敵な色付きの8pxのボーダーも各アイテムの左側に追加します。 デスクトップ上で小さな画面用のバージョンをテストした場合にはナビゲーションは美しく表示されますが、モバイルデバイス上だとアイテムをタップするのが難しいかもしれません。Modernizrを使えば、デバイスのタッチ機能の検出が可能です。デバイスにタッチ機能があれば、touchクラスがbodyに追加されます。このクラスを使うことで、ナビゲーションアイテムを少し拡大させることができ、ユーザがより簡単にタップできるようになるため、タッチデバイス上での体験レベルが向上します。ここで最後のmedia queryを閉じます。 これでデスクトップ/タブレット/モバイルデバイス上で快適に機能するタッチフレンドリーなRetina対応のナビゲーションの完成です。皆さんに気に入っていただけると嬉しいです!

詳細を読む »
CSS
winmonaye

第1弾:デザイン画像を稼働中のWebページに組み入れる方法

仕入れたデザイン画像を稼働中のウェブページに適用するのに苦労することはありませんか?ウェブ開発のすべり出しが順調であるにも関わらず、デザイン設計のある部分でつまづくことは? wireframes はあなたにとってコーディングによる設計よりも簡単?ローディング速度が遅くメンテの難しいwebの開発に満足できますか? 多くのデザイナーたちが自分のデザイン画像を稼働中のHTML/CSS web ページに上手く変換できません( 中にはコーディングすら全くしない人もいます)。大抵の場合、その理由はデザイン設計のアプローチと、1つの命令行を書き込む前のプロセスに対する考え方に問題があるからです。 噂とは裏腹にCSSは難しい言語ではありませんし、web ページやweb サイトの開発も難しくある必要はありません。多くの場合、問題は基礎構造の開発前に細かい部分を気にして混乱してしまうところにあります。またデザインのうち、コードを複雑化するような軽微で些細な部分の処理に捕われてしまうことも問題要因の一つです。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している場合もあります。オリジナルの記事はここよりご覧いただけます。 デモにリンク オリジナルの記事 この投稿では、皆様に自由にダウンロードできる試供デザインを閲覧し、そのデザインを稼働中のweb ページに組み入れる方法を見ていただきます。この投稿では私は簡潔なコードを用いますが、デザイン・テンプレートに付いたオリジナルコード同様、ページを立ち上げるために私が使用したコードをダウンロードしていただけます。この投稿自体は、主にデザイン設計のための思考過程に重点をおいて進めていきます。 ダウンロード The Artificial Casting テンプレート 下のデザインをご覧ください。これらはSmashing Magazinesから無料でダウンロードできます(当ページの3つ目のテンプレート)。 テンプレートクリエーターによる設計デモをご覧になり、上にある私のデモと比較していただくことも出来ます。 私がこのテンプレートを選んだのは、見た目がオシャレで私がチェスが好きだという理由もありますが、何より典型的な3カラム・レイアウトで、開発にあたり2つ3つの難関と選択肢が用意されているからです。また最終ページに入れるか否かを決定する詳細な箇所が数個含まれています。 デザインから開発までの過程に対する一般的考え Artificial Casting テンプレートの説明に入る前に、開発にあたってwebサイト全てに共通する2つ3つの事柄を考えてみましょう。 好むと好まざるとに関わらず、web ページは全てボックスを使って開発されます。HTMLの全要素はボックスを持ち、ボックスは CSSボックス・モデルをもとに形づけられます。隣同士や上下に並ぶボックスもあれば、他のボックスに包含されているものもあります。デザインが箱形でなければならないということではなく、開発時に作られるボックスについて考える必要があるということです。 最も上級なレベルでは、2つ3つの大ボックスで大枠のレイアウトが構成されて、デザインの詳細はその大ボックス中の小ボックスに入ります。これらの長方形ボックスを頭で思い描くことは、デザインのどの部分がボックスに上手くフィットして、どの部分をボックスから外すべきかを見定めるのに役立ちます。まずは、これらの大レイアウト・ボックスについて考えましょう。細かい部分を見て内側から外側へコーディングせず、外側からのコーディングを行います。 画像とHTTPリクエストは、webページのローディングを遅くする大きな要因の一つです。デザインを考えるにあたって本当に画像化するべきもの、またコードを用いて簡単に再現できるものは何かについて思案することは賢明です。一つ画像を少なくすることで、ファイルサイズもサーバー上のリクエスト数も縮小するため、 画像を最適化することができます。 私はただの大きな色の集合体に過ぎない、webページ上の画像を見かけることがよくあります。そもそも色の集合体が画像化されなければならない理由はないのです。私たちは画像を眺めて、どうやって必要とする画像全体のファイルサイズを縮めるかについて考えながら、使用する画像の数を減らしています。 レイアウト テンプレートに関してまず考えたいことは、レイアウト全体の概観についてです。デザインを大ブロックに分けようとしていますが、この場合、まず上下方向に行うのが最も簡単でしょう。デザインを見ると3つの帯がページを横切っているのが分かります。この帯がヘッダーやコンテンツ、そしてフッターに当たるものです。 フッター 最下部に3つの情報ボックスとテキストを含んだ分かりやすいフッターがあります。とりあえずフッターの中味は気にせず、先ず上部からフッターを切り離すためにどこで線引きするかを決めます。 この端の部分を画像化しますが、それをフッターもしくは上のボックスのどちらに入れるかを選択できます。どちらでもOKですが、私はイメージをフッターに入れることにしました。 この記事で触れませんが、最終的にはサイトにわたって繰り返されるページのある部分を別のファイルで管理するために、PHPを含有したファイルの類いを使用するのが妥当でしょう。この画像は当サイトの全ページ上に登場するため、私にとっては最終的にfooter.phpファイルになるフッターに置くほうが合理的なのです。 フッター内にある他すべての詳細については、基礎レイアウトの作成中はそれについて考える必要はありません。 コンテンツ 本文を3つのカラムと2つのサイドバー、そしてその間にあるメイン・セクションに分けてフッターの真上に置きます。3つのカラムについては後ほどもう少し詳しく触れます。今は内側を3つのカラムまたは3つの小ボックスに分割される、一つの大コンテンツ・ボックスについて考えるだけで十分です。 フッターの場合と同じく、コンテンツ・ボックスの初めと終わりをどこにするかを決めなければなりません。ここに開発上の問題のタネとなる2つの要素があります。複数のカラムおよびコンテンツ全体をそれぞれまたいでいるログイン・ボックスとチェスの駒の画像はヘッダーに属します。 オリジナルのテンプレート開発にあたって、両者はヘッダーの一部として設定されましたが、私はそれらをコンテンツエリアに置くことにしました。フッターの場合と同じく、この2つがサイトの全ページに登場させるべきかを考えました。確かにテンプレートのデザイン時に設定すればそうなっていたでしょう。しかし、2つがページ毎に変わるような柔軟性を持たせるのも良いだろうと考えました。 おそらく、サイト内の別のセクションでは別のチェス駒画像が登場し、ログイン・ボックスは一部のページあるいはセクションにのみ登場するでしょう。 コンテンツエリアにインクルード・ファイルは使いません。ページ毎に変わるセクションはここだけなので、サイトにわたって変化させたいデザイン素材は、このボックスに入れるのが妥当なのです。しかしここからチェス駒の画像をコンテンツとヘッダーの両方に置くため、どのようにコーディングするかを把握しておく必要があります。 ヘッダー ここではヘッダーについて紹介します。消去法からするとヘッダーにはロゴやナビゲーション・バー、そしてその背後に勾配の背景が入ります。ヘッダーとコンテンツエリアの間を、ページを横切る細いラインで仕切ります。このラインもページ毎に変化しないため私はヘッダーに入れています。ヘッダーは最終的にサイトの全ページに入る header.phpファイルになります。 レイアウトの作成 HTMLを以下のように組み立てることができます。 先述したメインボックスやビルディング・ボックスは、それぞれ セマンティック id を適用した divになります。 コンテンツエリアの中に3つのカラムが入っているのが分かるとおり、コンテンツ div は3つの追加 divsを持っています。一方がより重要であることを反映させるためによくされることですが、2つのサイドバーをそれぞれ「プライマリー」「セカンダリー」と名付けました。 チェス駒とログイン・ボックスの画像をコンテンツ div の中に追加しますが、 ログイン・ボックスをカラム構造の枠から独立させるために、 3つのカラムdivsの外に置くことにします。 ここからはCSSについて。 CSSでサイトのレイアウトを作る際の鍵は、CSSの不要な場合を見定めること、そしてフロートを要する場所がわずかであるという理解です。HTMLでは、コンテンツ div はそのままヘッダー divの真下に置き、 フッター div はそのままコンテンツdiv の下に置きます。これは div のデフォルト動作で、それが起こるために何もする必要はありません。 このデフォルト動作を変えたいので、コンテンツdiv内の各 divs をフロートします。これら3つのdivs がお互いの下に来ないように、お互いを隣り合わせにして配置し各々左方向にフロートするようにします。 デフォルト動作を変更させたら次はフッター divの調整を行います。 コンテンツ div内の内容全てがフロートした状態にあるので、 フッター divは自動的にその下に来ることはありません。 clear: both を追加することで(ここでは  clear: leftを使っていますが)フッター div を強制的にコンテンツ div下に持っていきます。 必然的により多くのCSSが最終的には必要となります。上記のコードを試すと、どの divs にも幅や高さ指定、またそれらを設定するコンテンツがないため内容が乏しいのが分かります。そこにはこれから中味を埋めていく空っぽの構造体があるだけです。 フロートされた3つの divs の合計幅がページ全体の幅を越えないようにしなければいけないため、それら3つの幅設定には特に注意する必要があります。レイアウトに際してのもう一つの決定事項である全体の幅について、まだ詳しく述べていないことにお気づきでしょう。 固定もしくはリキッドのレイアウト デザイン・イメージを一見しただけでは、デザインが 固定されているのか流動的なのかが分かりません。事実どちらも可能なのです。テンプレートに付いているコードを見ると、3つの水平の帯(ヘッダー、コンテンツ。フッター)がウィンドウの端まで伸びながら、帯内のコンテンツ全部がページの中央に来るように設計されています。同じように私たちもしてみましょう。 全てを固定して中央に持っていきたい時は、div でその周辺を包んで幅を確保し、その div  で包んだ部分を中央に据えます。おそらくCSSでページを中央に置く方法が皆さんには馴染み深いでしょう。 ページ全体を中央に置く方が簡単と言えば簡単なのですが、ここではそれを行いません。3つの水平帯の背景をブラウザの端まで伸ばしながら、帯内の内容全てをウィンドウの中央に置きます。私たちが目指すのは リキッドな背景と固定したコンテンツですが、幸いにもSoh Tanaka氏がすばらしいとても簡単な解決方法を提供してくれました。 ただCSSで一つのクラスを作り、それをHTML構造内にある選択可能なdivsに適用するだけでよいのです。 センタリングに精通している人なら、上のコードが通常 wrapper divに加えるものであることにお気付きになるでしょう。クラスとしてCSSを設定すれば、それが適用される箇所での柔軟さとコントロールが確実になります。新しいHTMLはこのようになります。

詳細を読む »

digitalskillが更にコンテンツパートナーを追加しパワーアップ

明けましておめでとうございます。 遂に2012年がはじまりましたが、皆さんの今年の目標は決まりましか? Digitalskill.jpでは、今後も更に皆さんウェブ作成に役立てる記事をお届けするために、すごい目標を立てていますので楽しみにしてください。 そして、年明け早々、世界で名が知られているウェブ開発者たちを紹介頂き、その中で何人かからコンテンツパートナーとして参加いただきました。 コンテンツパートナー 今回参加いただいた、コンテンツパートナーは以下になります。皆さんも是非パートナーのサイトに訪れて、翻訳して欲しい記事を探してみて、見つかりましたら、 是非コメント欄でリクエストしてください。 Codrops 今回参加いただいた中で一番嬉しかったパートナーです。なんと行っても、数多くの面白いテクニックのチュートリアルがあり、既に自分はドキドキして、「これもいい!」「これも面白い」って読んでます。 Design Depot DesignDepotは、NettutsやSmashineMagazineと並ぶ、老舗の一つで、まさかのOKでした。ただ、翻訳できるコンテンツに制限を付けられましたが、今後更にDigitalskillの成長に伴い、制限が取れると思います。 CSS Wizardry 最後にcsswizrdryは、 Harry Robertsの個人ブログサイトで、チュートリアルはほぼないですが、CSSに対する考え方や、高い視点からの意見など、CSSのチュートリアルはもう必要ない上級者が討論できるような記事が面白いです。 Digitalskillは、今後も更なるコンテンツの充実させるために、記事を書いてくれる方や、初心者向けのリファレンス作りを手伝ってくれる方を募集しています。もちろん、好きな時間にご自宅からでOKです。興味がある人は、winmonaye@gmail.comまで。 それでは、今年もどうぞよろしくお願い申し上げます。

詳細を読む »

ウェブ開発者に必要不可欠な35の技術

世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。 その中で最も急成長しているニッチャーの1つはもっとバックエンドワークを好み、Webサイト全体のアプリケーションを作成するのが得意な人たちです。本来ならば自分たちのアイデアを生かしゼロから目的に合ったサイトを構築するべきだと思いますが、多くのクライアントが既存のプラットフォームを用いて自社サイトを構築するようになってきています。ここがニッチャーWebディベロッパー達の狙い目でもあるわけです。 今回のアーティクルではWebディベロッパーがWebアプリケーションを作成する際に、そのアプリケーションがクライアント用であろうとも個人的なプロジェクトであろうとも知っておくべき技術やスキルをご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 有益なサーバーサイド・スクリプト言語の一例 Web全体のアプリ開発者とフロントエンド開発者の決定的な違いは、サーバーサイド・スクリプト言語の知識の有無です。サーバーサイド言語とはサーバー上で実行される言語であり、より多くのプログラミング機能がありデータベースにアクセスし操作することも可能です。PHP、Perl、Ruby、ColdFusion、Java、ASPなどがその一例です。Webアプリケーション用の最も一般的で効率的な言語としては、PHP、Ruby、ASPが挙げられるでしょう。そしてこの中でASPは主に政府機関や大企業使用されています。個人で取り扱う場合にはPHPやRubyがベストな選択と言えるでしょう。そして何がいいって、この2つともオープンソースなんです。更に詳しい情報はWhich Server-Side Language Is Right For You?のサイトを参考にしてみてください。 Image credit: laughingsquid Webディベロッパーになりたての頃は、割と多くの人が本来必要でもない複数の言語を習得しようとします。けれどこれは間違いです。最初の頃こそは自分に合う言語はどれなのか幾つか試してみるのは良いと思いますが、更に度を越して幾つもの言語を習得しようとするのは単なる時間の無駄に過ぎません。1つ選んだらそれに拘って、その言語をより深く学ぶことに焦点を当てるべきです。ベストプラクティス(最優良の事例)や構文を学び、スニペットやスクリプトを収集し、人気の高いフレームワークを試してみる事です。(CakePHP for PHP、Ruby on Rails for Ruby、ASP.NET for ASPなどが良い例です。) オブジェクト指向プログラミングとコーディングアーキテクチャ 極めたいサーバーサイド言語を決めたら、その次に基本構文を学ぶことは非常に大切です。しかしプログラマーとしての本当の才能は、きちんとした正しいコーディングが出来るか否かです。コードを再利用する為にも、いかなる言語の場合でも常にオブジェクト指向のプラクティスを使用し、きちんと順番にファイルとコードを管理する様に心がけてください。OOP(オブジェクト指向プログラミング)の背後にあるロジックを説明するようなリソースは、オンライン上でもどこでも無限に存在します。また特定言語を習得する為のチュートリアルも無限に存在します。初めは全く分からなくてめげてしまうかもしれませんが、そんなに難しいことは書いてありません。とにかく通しでチュートリアルをよく読み、沢山練習することです。それがOOPを理解し習得するのに最善で最短の方法です。 Image credit: ppix またプログラミングのアーキテクチャについてもよく学んでください。そうすることにより、コードの一貫性と効率性を維持出来るようになります。コーディングアーキテクチャの一例で、MVC architecture (Model-View-Controller)があります。これは最も一般的でありサポートも充実しています。コードをよくオーガナイズする方法を知っておけば、更新も容易になり、効率的に実行することも可能となります。また、全てのコードにおいて論理的な順序であることは必要不可欠ですが、Webアプリの規模が大きくなればなる程更に重要視するべきです。 データベースデザインの知識 ほぼどんなWebアプリケーションにとっても、データベースは必須であると言えます。そしてもしデータベースを実際使用するならば、構造化する方法も知っておくべきだと思います。新しいプログラミング言語やコーディングの方法論を学ぶのと同様に、優れたデータベースデザインを使用するのにも熟練が必要です。フレッシュなWebディベロッパーはデータベースのデザインなど、アプリケーションの種類に合わせて変幻自在だとお思いになるかもしれません。しかしプログラミング言語やWebアプリケーションのアーキテクチャ自体と同様に、データベースデザインにもルールやコンセプト、ベストプラクティスなどが存在するのです。 Image credit: keepingitfake リレーショナルデータベース設計用のリソースを参照し、素晴らしいデータベース構造を駆動する中核となるコンセプトをしっかりと理解してください。適切に設計されていないデータベースだと、コードがきちんと関連付けられないだけではなく、実際に情報量が増えてきたときにエラーが発生したりWebアプリケーションの動作自体が遅くなったりします。 ここで最初の一歩となるようなリソースを幾つかご紹介しますね。 The Basics of Good Database Design in Web Development Ten Common Database Design Mistakes Relational Database Design AJAXを賢く使う AJAXが浸透し始めて久しいですが、今日ではその機能の良さや流行の波により持てはやされているのではなく、もっと背後にある実用的な目的のために利用されるようになって来ました。AJAXはサーバサイド・スクリプト言語をアシストとして、JavaScriptとサーバーの対話を可能にしました。JavaScriptの内側からサーバーサイド・スクリプトを読込み応答を待ち、ページの更新やリフレッシュすることなくデータベースとの交信を可能とします。 net tuts+ もし今までページを再読込みすることなくログインや登録、プロファイルの更新、データベースからの情報取得やもろもろ出来たという経験がおありなら、それはAJAXのおかげです。AJAXはサーバリソースを節約し、携帯電話のWebサイトでは巨大な利点を持ちますが、それだけではなくユーザーエクスペリエンスをも向上させます。AJAXを利用することにより明らかにベネフィットは増えますが、Webアプリケーションが大きくなればなるほど、その恩恵も大きくなると言えるでしょう。 AJAXに関するリソースを幾つかまとめてみましたので、よろしければどうぞ。 W3Schools AJAX Tutorial Tizag AJAX Tutorial NetTuts+ JavaScript and AJAX サードパーティサービスとの統合 今日のほぼ全てのWebアプリケーションは、FacebookやTwitter、Google、PayPal、Amazonなどのサービスと何らかのつながりがあるのではないでしょうか。これは人気のソーシャルネットワークを経由してサインインし、他のWebアプリケーションのサービスを利用したりとか、個別にそれぞれ自分の情報をセットアップすることなく簡単に他のアクションを実行することを可能としています。 LiVEJOURNAL 上記のような有名なものの他にも、ほぼ全てのWebサービスでAPIが使われています。構文や使用目的に若干の違いはあるかもしれませんが、大きく見れば似たようなプラクティスを使用しています。ディベロッパーならばAPIの使い方を全般的に知っているべきですし、同様にSOAPのコンセプトも知っているべきです。SOAPのコンセプトとはWebサービスを操作する為の、一般的普遍的な方法のことです。非常によく出来たスターターガイドとチュートリアルがあるので、ご紹介しますね。Understanding Web Services Specifications モバイルバージョンの開発 どのようなデバイス上で閲覧されているかという見地から、Webアプリケーションの汎用性の高さは今まで以上に重要視されてきています。全てのアプリケーションにはモバイルバージョンやタブレットバージョンがあるべきですし、様々なスクリーンサイズにも対応可能であるべきです。もし有料アプリなら尚更のことです。これは全てアクセシビリティとユーザーの満足度を高めることにつながってきます。モバイルデバイス上で使い難いなぁと言うイメージを植えつけてしまうと、Webアプリのブランド自体を傷つけることになってしまいます。 Alsa Creations モバイルでのWebアプリの作り方を研究するか、必要あらば誰か他の人を雇用することも頭に入れておいたほうがいいと思いますよ。 よいビジネス、UIデザイン、戦略の基本 もし独自のアプリを作りたいのなら、アプリケーションの作成方法以上のことを知っている必要があります。けれどどのように向上させたら良いのでしょうか。ビジネス戦略をきちんと持ち、Webアプリの設計とレイアウトが出来、Webアプリのマーケティング方法を知っていること、これら全てが繋がってきます。昨今の過飽和市場においてこのようなノウハウを持つことは、プラスの要素というレベルではなくむしろ必須事項です。もし最速で最も効率の良い、素晴らしいコードで書かれたアプリをマーケットに発表したとしたら、あんまり関係のないことかもしれませんが、もしアイデアも稚拙でデザインも乏しくビジネスの観点からも外れていた場合、成功するわけがありません。 Matt Dempsey これはクライアント用にWebアプリを構築する場合も同様です。クライアントには既にアイデアがあるかもしれませんが、Webアプリを作成するにあたりプロとしての専門的な知識を駆使することは我々ディベロッパーとしての責任と言えましょう。クライアントが堅実なビジネスプランを持ちマーケティングの知識も持ったようなインターフェースデザイナーを雇ったとしても、あなた自身もそういう方面に関する知識を所有していれば、プロジェクトの最良の結果を出すためにそういった知識と自身の開発スキルを相乗効果で発揮することが出来るのではないでしょうか。 バージョンコントロール 全てのアプリケーションに対して必要だというわけではございませんが、公の場で使用されるようなアプリを作る場合にはバージョン管理システムにも気を配る必要があります。もし他の人と一緒に仕事をするのならば、アップデートや修正の追跡が出来るようにすることは尚更必要です。Git、SVN、CVSなどWebアプリケーションのバージョンを管理するための無料ツールを含め、オープンソースのバージョン管理システムは沢山世に出回っています。まずは7 Version Control Systems Reviewedなど参考になさってみてはいかがでしょうか。 Git 終わりに 毎日どんどん新しいWebアプリケーションが現れてきて、みなさん独自の素晴らしいアイデアをお持ちのこの世の中ではWeb開発産業のニッチ市場に参加することはWebアプリ開発者として賢い選択だと言えるかと思います。Web開発においてニッチ市場を選択することは非常にチャレンジングでありまた遣り甲斐があり、その為多くの開発者たちがこの道を選ぶのではないでしょうか。 世の中には沢山の学ぶべき技術や身に着けておくべきベストプラクティスがあり、そのリソースの殆どは無料で提供されています。なので本人の心構え次第で、誰でもWebアプリの作成方法を学べることが出来るんですよ。

詳細を読む »

スティーブ・ジョブズの偉大なる軌跡(1955-2011)

この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 もし、スティーブ・ジョブズが10月5日水曜日に逝去したことをご存じないとしたら、きっと洞窟の中などで生活なさっているのでしょう。世界中のニュースで放送され、TwitterやFacebookや日常のプライベートな会話内でも、この偉大な企業家が残した膨大な損失と巨大な穴についての話題で持ちきりになったと言う事実は言うまでもありません。そうですね。確かにスティーブ・ジョブズは「全世界をあっと言わせ」ました。 "I want to put a ding in the universe."(世界中をあっと言わせてやりたいんだ。) この記事では数々の影響力の大きな名言や、スティーブ・ジョブズに敬意を表して贈られたアート作品を引用し、スティーブ・ジョブズの功績とプロフェッショナルな人生について着目していきたいと思います。 偉大なるスティーブ・ジョブズ "Be a yardstick of quality. Some people aren’t used to an environment where excellence is expected." (自身がクオリティの判断基準となりなさい。中には卓越を期待される環境に慣れていない人もいるのだから。) バックグラウンドについて "Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice." (人生は限られている。だから誰かの人生を生きて時間を無駄にしたりしてはいけない。他者の考えの結論に過ぎないのだから、世の定説に引っかかってはいけない。他者の考えに惑わされて、自分自身の心の声を聞き逃してはいけない。) スティーブン・ポール・ジョブズは1955年2月24日サンフランシスコにて産まれ、ポール&クララ・ジョブズ夫妻に養子として迎え入れられました。ジョブズ夫妻はまた女児も養子として迎え入れています。彼の産みの両親はのちに結婚し、女児を設けました。 1972年に高校を卒業後、オレゴン州ポートランドにあるリード大学に進学しましたが、たった1学期で退学を決意しました。彼自身の言葉で表現すると、退学(ドロップ・アウト)を決意してからは、興味のある授業にのみ出席(ドロップ・イン)していました。その興味のある授業の中のひとつが、カリグラフィーのコースでした。ジョブズはのちに「もし大学でカリグラフィーの授業を受けていなければ、Macは複数の書体や適切な文字間スペースフォントを搭載していなかっただろう。」と述べています。 インドでの滞在を終えてから、スティーブ・ジョブズは元の職場であるアタリに技術者として復帰しました。 1976年にスティーブ・ジョブズはスティーブ・ウォズアニックとロナルド・ウェインと共にApple社を設立しました。その後1983年にペプシコーラに勤めていたジョン・スカリーをApple社のCEOとして引き抜きました。この時のあまりに有名な口説き文句が「このまま一生砂糖水を売り続けたいか。それとも自分と一緒に世界を変えてみないか。」と言うものでした。 1984年の終わりに向かい不況に見舞われながらジョブズとスカリーの仕事上の関係は悪化し、内部権力闘争の結果、スティーブ・ジョブズはマッキントッシュ部門責任者としての職務を追われました。ジョブズはのちにApple社から解雇されたことは、彼の人生に起こった最高の出来事だったと語っています。 NeXTプロジェクト "The heaviness of being successful was replaced by the lightness of being a beginner again, less sure about everything. It freed me to enter one of the most creative

詳細を読む »