ASCII.jp：たった4行で電話が作れるAPI「Twilio」とは？ (1/2)｜Twilioではじめるクラウド電話開発
Twilioは簡単に言うと、「Webから電話を簡単に操作できるAPI」です。ほとんどの連絡をメールやSNSで済ませるようになった昨今、「いまさら電話？」と思った方もいるかもしれません。しかし、エンジニアの視点から、またサービス企画の視点から見て、Twilioは実に多くの可能性を秘めたAPIなのです（筆者もまた、その可能性に注目している1人です）。 Twilioを使うと何ができるのか？ どんな可能性があるのか？ その魅力を、連載を通じて紹介しましょう。 まずはTwilioを体験してみよう Twilioとはどんなものなのか？ まずは手元の携帯電話などから以下の番号に電話をかけてみてください（通話料がかかります）。 電話につながると、ややぎこちない女性の声でメッセージが流れたと思います。実はこの自動応答システム、Twilioを使って、たった4行のコードだけで実現されています。 <?xml ver
サンプルで学ぶHTML5の仕様変更要素・中編 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5には、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素があります。引き続き、意味や、使い方に変更があったり、注意点が加わった要素を解説します。 各要素の解説冒頭に登場する「カテゴリー」と「コンテンツモデル」については、第5回を参照して復習してください。 HTML5のグローバル属性 以降の解説で
「良質なコンテンツ」を測定する7つの指標
コンテンツが重要な時代になってきました。SEOでは良質のコンテンツ作成が王道だ、と昔から言われていましたが、最近のGoogleのアルゴリズム変更はその理想論を現実に近付けました。「コンテンツマーケティング」という言葉も耳にするようになりました。 ただ、自社サイトの特性に合わせて良質のオリジナルコンテンツを作るためには、工夫やリソースが必要になります。そこで、何が「良いコンテンツ」なのかを定義し、その「良さ」を客観的に評価できるようにしておくと便利です。著名ライターに依頼したり、コストをかければ良いというわけではありません。精度や効率を無視してお金をかけ続けるような運用は、最初はよくても長続きしないでしょう。 そこで今回は、良いコンテンツの定義と測定方法について考えてみます。 良質なコンテンツを読むとどうなるのか？ 良いコンテンツに出会うと、ユーザーはどう行動するのでしょうか？ いつものよう
InDesignみたいにWebデザイン、「Adobe Muse」に日本版
「紙媒体のデザイナーのためのWebデザインツール」――。そんなコンセプトの新しいソフト「Adobe Muse 2.0」を8月21日、アドビ システムズがリリースした。英語版は2011年8月にパブリックベータが公開されていたが、日本語版の提供は今回が初めて。単体パッケージは販売せず、Creative Cloudのメンバー（月額5000円〜）向けに提供する（単体サブスクリプションは計画中）。 マスターページ、ガイド、スウォッチ……おなじみの機能 Adobe Museは、HTMLやCSSなどのコードを記述せずに、Webサイトを制作できるソフト（Mac OS X/Windowsに対応）。Webサイトの制作では、PhotoshopやFireworksなどのグラフィックソフトでカンプを作成し、HTML/CSSをコーディングする流れが一般的で、HTML/CSSの知識が必須。「ホームページ作成ソフト」を使
月商3000万円超えECサイトを作る サイト設計の秘密 (1/2)
2002年のオープン以来、順調に売上を伸ばしてきたワイシャツ通販サイト『ozie（オジエ）』。だが、商品点数が増えるたびに手作りで“増改築”を繰り返してきたサイトの構造は次第に複雑なものになり、すっかり使いづらいサイトになっていた。 2011年1月のリニューアルでは、サイト構造にも抜本的なメスを入れた。特徴的なのは、サイトを初めて訪れたユーザーが、大分類から小分類へと商品を絞り込みながら目的の商品へ辿れる構造にしたことだ。 ユーザーを振り分けるトップページの役割 あらためて新生ozieのトップページを見てみよう。 ずらっとシャツが並んだキービジュアルの下には、「メンズシャツ」「レディースシャツ」「ネクタイ・アクセサリ」「セール」「ユニフォーム」の5つの項目が、それぞれに対応したビジュアルを添えて並んでいる。 「トップページを訪れるお客さまの多くは、購入する商品を明確に“これ”と決めているわ
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
いいね！を超える拡散力、「Open Graph」とは？ (1/2)
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。今回は、注目を集めるFacebookアプリの新機能「Open Graph」について紹介します。 あらゆる活動を共有する「Open Graph」と「いいね！」の違い FacebookのOpen Graphとは、「映画を観た」「音楽を聴いた」「買い物をした」など、ユーザーのさまざまな活動（アクティビティ）を、Facebookのタイムライン上に共有する機能です。2012年1月の発表以来、海外のFacebookアプリを中心に導入が進んでおり、国内でも「Yahoo! ニュース」が導入したことで話題になりました。
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
jQuery Mobileによる問い合わせフォームの作成 (1/5)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
実例でわかる！スマートフォンサイトの画面設計 (1/3)
スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です！ 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
HTML5/CSS3で作るスマートフォンサイトの基本 (2/5)
HTML制作の準備 デザインカンプが完成したら次はHTMLの制作ですが、実際のコーディングに入る前にいくつか必要な準備があります。 第2回で紹介したとおり、スマートフォンサイトの制作では実機での確認が欠かせないため、実機からアクセスするためのWebサーバーが必要です。今回は私が普段使っている開発サーバーにサブドメインを設けてファイルを随時アップロードしながら確認することにしました。ローカル環境にWebサーバーを立てるか、レンタルサーバーなどを利用してテスト環境を用意してください（第2回を参照）。 HTMLテンプレートを用意する iPhone、Androidに搭載されているブラウザー（ともにレンダリングエンジンはWebKit）はHTML5を積極的にサポートしています。今回のようなスマートフォン専用サイトではPCサイトのように過去のブラウザーを気にする必要はありませんので、HTML5でコーディ
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
制作現場で役立つjQueryプラグインの使い方 (1/3)
jQueryを利用してさまざまなUIの作成方法について解説してきた本連載も、いよいよ残すところ2回です。今回と次回では、Web制作の実務で役立つ「jQueryプラグイン」の概要と利用方法について解説します。 jQueryプラグインとは？ 「jQueryプラグイン」とは、jQueryと一緒に利用するJavaScriptライブラリーのことです。jQueryは本連載で解説してきたように簡単な記述で利用できますが、jQueryプラグインを使うとより手軽に、Webサイトにさまざまな効果を付けられます。 jQueryプラグインはjQueryでスクリプトを書ければ簡単に作成できるため、インターネット上には膨大な数のプラグインが公開されています。公式サイトのjQueryプラグインの紹介ページに紹介されているだけでも4000個近く、ブログなどで個人が公開しているものも合わせれば、その数は数万種類にも及ぶでし
制作現場で役立つjQueryプラグインの使い方 (3/3)
jQueryプラグインの探し方 数万種類も存在するjQueryプラグインの中から、目的にあったプラグインを見つける方法はいくつかあります。1つは、公式のjQueryプラグインの紹介ページから探す方法です。解説はすべて英文ですが、比較的平易な文章が多いですし、解説を読まなくてもサンプルコードとデモなどで大まかな利用方法は理解できるはずです。 公式サイト以外にも、jQueryプラグインを紹介しているサイトは多数あります。海外サイトの「jQuery List」では、膨大な数のjQueryプラグインがカテゴリー別に紹介されています。jQueryプラグインには同種のまとめサイトが多数存在しますので、これらのまとめサイトからプラグインを探すのも手です。
オプト、ソーシャルメディア対応度を分析する「SMOスコア」提供開始
株式会社オプトは2010年9月29日、Webサイトのソーシャルメディア対応度を分析・診断する「SMOスコア」の提供を開始した。 SMOはSocial Media Optimization(ソーシャルメディア最適化)の略称。Ogilvy Public Relations のRohit Bhargava氏によると、ソーシャルメディアサイトやオンラインコミュニティに自社の情報を広く流通・拡散させていくと同時に、ウェブサイトへのトラフィック増加やリンク獲得が行えるようサイトを最適化していくことの概念を示している。 オプトは今回、独自のノウハウに株式会社モディファイの監修・協力を加えて、ソーシャルメディアからのトラフィック獲得施策の現状を分析・指標化するSMOスコアを考案した。SMOスコアは、サイト内分析、ソーシャルメディア分析など、4つの分析テーマから現状分析・診断を実施する。それぞれのテーマは2
ユーザー目線のSEO対策「ヒマワリ思考法」 (1/3)
企業のWeb利用はいまや当たり前。しかしあなたの会社は本当にWebを活用できていると自信を持って言えるでしょうか？ 鍵を握るのが、Webサイトマスターです。サイトマスターは企業サイトのいわば社内プロデューサー。マーケティング、デザイン、Web技術と幅広い知識を持って、サイト運営を担う人物です。 本連載では数々の企業サイトを成功に導いてきたコンテンツブレインの小池 勉氏が、サイトマスターが知っておきたい企業サイト運営のノウハウを提供します。小池氏が発見した「法則」の中から、企業サイトの成功のヒントを探っていきましょう。（編集部） 検索サイトから自社サイトへの誘導強化は、アクセスアップの基本。しかし、サイト運用側から見ればユーザーを呼び寄せているつもりでも、ユーザーから見れば情報を探す途中にたまたま立ち寄っただけかもしれません。たまたまサイトに立ち寄っただけの人に商品を買ってもらったりリピータ
ASCII.jp：アマゾン、東京にクラウド構築か
アマゾンが東京にデータセンターの構築を計画していることが、同社の求人サイトで明らかになった。 Amazon.co.jpにはエンジニア積極採用のバナーが掲載されている 現在、Amazon.co.jpには「Amazonエンジニア積極採用中」との自社広告が掲載されており、リンク先では「Amazonエンジニア特別求人」の特設ページが公開されている。募集職種は配送センターのIT運用管理からソフトウェア開発エンジニアまで多岐にわたるが、注目は「データーセンターテクニシャン」と「データーセンターオペレーションズマネージャー」。データーセンターテクニシャンはデータセンター全体の設計・構築・運用、データーセンターオペレーションマネージャーは同管理職と説明されている。 Amazonエンジニア特別求人のページ。ところでなぜ忍者なのか？ 同ページの説明によると「影の存在でありながらすごいことをするという思いを込め
上級者向け！ 一歩進んだFirefoxアドオン徹底ガイド (1/7)
使い始めると手放せなくなる、本気の使いこなし系アドオン Firefoxの魅力は軽快な動作速度と豊富なアドオンにある。特にアドオンはFirefoxでしか使えない便利機能も多く、ユーザーが他のブラウザに乗り換えるのをためらう大きな理由になっている。ASCII.jpでは前回の最強アドオン50選で、初心者にも安心してお勧めできる定番アドオンを紹介した。今回は、少々取っつきにくいが、使い始めれば手放せなくなる、やや「上級者向け」の便利なアドオンを集めてきた。 作業環境を快適にしたい まずはじめに紹介するのは、便利な小技系のアドオン。解説が英語だけだったり、使うのに必要なボタンをツールバーのカスタマイズ機能を使って取り出す必要があったり……といった少々の面倒さはあるものの、分かってしまえば手離せなくなるアドオンを紹介していこう。まずはブラウザー自体の高速化や印刷補助など、ユーティリティー系のアドオンか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
