アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた
注：単純なデータモデルでさえ、今後の維持や説明が必要になる6つものエンドポイントが含まれています。 あなたがクライアント側の開発者で、movies APIを使い、HTMLとjQueryで単純なWebページを作るとします。そのためには、映画と出演俳優・女優の情報が必要です。APIに必要な機能は揃っているので、データを取得します。 新しくターミナルを開いて以下を実行します。 curl localhost:3000/movies 以下の応答が返ってきます。 [ { "href": "http://localhost:3000/movie/1" }, { "href": "http://localhost:3000/movie/2" }, { "href": "http://localhost:3000/movie/3" }, { "href": "http://localhost:3000/mo
作って分かるHTMLメールの基本と使えるタグ／CSSまとめ (1/2)
Emailology - The Science of Looking Good in the Inbox HTMLの冒頭 実際にメールのHTMLを作成しましょう。HTMLの冒頭の文章型宣言は「XHTML 1.0 Transitional」を指定し、HTMLページの始まりを宣言しています。 head要素では、文字コード、ページタイトル、viewportを設定しています。HTMLの文字コードは「UTF-8」、Webページのタイトルを表すtitle要素は、空（から）です。viewportの設定は横幅をデバイス幅に、初期拡大率は1.0の等倍です。 ■HTML冒頭 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
iPhoneとカレンダーを同期 Google Syncを試す (1/3)
iPhoneでGoogleカレンダーを使いたい人に朗報！ 9日、グーグル自身が「Google Sync」のiPhone対応を発表したのだ（関連リンク）。 これでGoogleカレンダーのスケジュールを、iPhoneの「カレンダー」アプリと同期できるようになった。しかも同期はケーブルを使わず、無線でOK！ 例えば、自宅にあるMacでGoogleカレンダーに予定を追加し、出先でiPhoneを取り出して予定をチェック──といったことが実現できるのだ（もちろんその逆も可能）。 今まで、Macのカレンダーソフト「iCal」のスケジュールは、アップルの「MobileMe」を利用することでiPhoneの「カレンダー」と同期できていた。しかし、MobileMeを使うには年間9800円かかる。その「有料の壁」をなかなか超えられないという人もいるだろう。 一方で、Google カレンダーは何といってもタダなので
もっと自転車メーカーも知ってください (1/4)
さて、前回、前々回でいろんな自転車を紹介しましたが、今回はその自転車を製作・販売する自転車メーカーを紹介したいと思います。 といっても、星の数ほど自転車メーカーがあり、紹介するだけで多分2回3回と連載が続いてしまうのはいかがなものかということで、取りあえずはロードバイクを扱って、そこそこレースなどの実績があるメーカーを紹介します。しかし、それでも紹介しきれないメーカーもあるでしょうが、そのへんは予めご了承下さい。 国産メーカー まずは国産メーカーからご紹介しましょう。 国産メーカーでレースに参加しているメーカーは、実はそれほどありません。前回の記事でも若干触れましたが、ロードバイクのようなスピードの出る自転車を乗れるような、恵まれた道路事情ではなかったということや、自転車競技といえば競輪という文化的なものがあったりして、実際の所、ロードバイクレース自体もそれほど盛んではなかったという事が影
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
ASCII.jp：Facebookページの作り方、教えます｜今日からできるFacebookファンページ制作＆運用ガイド
ローソン、無印良品、リクルート――世界6億人ものユーザーを抱える巨大SNS「Facebook」の日本での本格的なブレイクを前に、ファンページを開設する企業が相次いでいます。しかし、国内でのFacebookの企業活用はまだ始まったばかりで、実際にどのようにしてFacebookページ（ファンページ）を作り、運用したらよいのか？ 多くの企業が手探りの段階です。 本連載では、Facebookページの作成を請け負うWeb制作会社「TAM」の加藤 洋氏が、Facebookページの開設からカスタマイズ、ファンを獲得する方法まで、Facebook活用の具体的なノウハウをシェアします。（編集部） なぜいまFacebookなのか？ 私が勤務するTAMでは、Facebookをはじめとするソーシャルメディアの活用を企業へ積極的に提案しています。お話する中で必ず出るのが、「Facebookが他のSNSと何が違うのか
ScreenRecycler（スクリーンリサイクラー）
Q 遅くて使えない古いノートマシンを持っています。捨てるのはもったいないので、有効活用する方法を教えてください。 A LANを組めれば、古いマシンのモニターに自分のマシンの画面を表示して、サブモニターとして使うことができます。 ScreenRecycler 開発元／Patrick Stein 種類／シェアウェア（19.95ユーロ） インストール／単純コピー（ドライバーはインストーラー） http://www.screenrecycler.com/ いらないマシンのモニターをデュアルモニターとして使う 「ScreenRecycler」はその名のとおり、使っていない古いマックのモニターをサブモニターとして使うソフトだ。Windows／Linuxマシンの画面を利用することもできる。 まず、メインマシンのMacに「ScreenRecyclerDriver」をインストールし、ScreenRecycl
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
JavaScriptで振り分けてスマホサイト完成！ (4/5)
スマートフォンとPCの振り分け ここまでできたらいよいよサイトの公開です。今回は、スマートフォンサイト用に「iphone」というサブドメインを割り当てました。 作成したファイルをWebサーバーにアップロードすれば一応完成ですが、スマートフォンサイトのURLをユーザーに入力してもらうのは現実的ではないので、iPhone/AndoridからPCサイトにアクセスしたときには自動的にスマートフォン専用サイトに振り分けるようにしましょう。 iPhone/Androidからのアクセスを判別して専用サイトに振り分けるには、JavaScriptやPHPなどのプログラム言語か、Webサーバーの設定を利用します。今回はもっとも手軽なJavaScriptを使って振り分ける方法を紹介します。まず、端末の振り分けのときに利用するのが、「ユーザーエージェント」と呼ばれる情報です。 ユーザーエージェントとは ユーザーエ
ASCII.jp：PhotoshopのフィルターをJavaScriptで作る！｜古籏一浩のJavaScriptラボ
Adobe PhotoshopもJavaScriptをサポート JavaScriptにはInternet ExplorerやFirefox、Safariなど、Webブラウザー上で動作するもの、というイメーシがありますが、JavaScriptはデスクトップアプリケーションにも活躍の場を広げています。 特に、「Photoshop」に代表されるアドビ システムズのアプリケーションのほとんどがJavaScriptをサポートしており、Photoshopや「Bridge」「After Effects」 はソケット通信まで対応しています。つまり、Webサーバーにアクセスして必要なデータを受け取り、Photoshopで画像を加工し保存する、といったことがJavaScriptで自動化できるのです。さらにBridgeと連携すれば、FTPを使って加工した画像データをサーバーに転送する、といった処理まで自動化でき
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
浜 俊太朗のHTML5マークアップ移行ガイド
新Mac OS X「Snow Leopard」を徹底解剖 (1/4)