10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
ASCII.jp：シングルページをデザインする3つのポイントとワークフロー (1/3)｜イシジマミキの実践！「シングルページ」デザイン塾
最近よく見かけるシングルページを作るデザイン塾。今回から、CSSフレームワークを使って実際にシングルページを作成していきます。第2回は、デザインツールを使ってページをデザインし、ベースとなるHTMLを作成します。 シングルページをデザインしよう 最初に、デザインソフトを使ってざっくりと全体のデザインを作成します。今回は、自分自身の経験やスキルを活用してボランティア活動をする人の意思表示やコンタクト方法がわかるWebサービス「PROBONO PAPRIKA」のサービス紹介ページをシングルページで作ろうと思います。 自分自身の経験やスキルを活用するボランティア活動はプロボノ（Pro bono）と呼ばれます。このサイトは、メインビジュアル、サイトの内容を説明する「アバウト」、サイトの使い方、の3つのブロックに分け、最後に何かを足そうかなぁ、と宙ぶらりんのままにしています。 シングルページのデザイ
Tumblrテーマ作家が教える上級カスタマイズテクニック
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。第3回と第4回では、カフェのサイトを想定したTumblrテーマを完成させました。今回は応用編として、テーマの完成度をさらに高めるためのテクニックを紹介します。 トップページとパーマリンクで異なる構造にする 前回制作した「Cafe」テーマは、トップページとパーマリンクページ（個別の記事ページ）がほとんど同じレイアウトでした。実際には、Webサイトによって、トップページとパーマリンクページをまったく別のレイアウトにしたい場合もあるでしょう。 このような場合は、{block:IndexPage}と{block:PermalinkPage}という2種類のブロックを使います。トップページ用のコンテンツは{block:IndexPage}...{/block:IndexPage}、パーマリンクページ用のコンテンツは{blo
Tumblrテーマをカスタマイズしてカフェサイトを制作 (1/2)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、テーマのコーディングから、9種類の投稿タイプをブログに表示する部分まで進めました。今回は、より細かな部分を仕上げていき、テーマを完成させます。 ページの追加とナビゲーションメニューの表示 Tumblrには、通常のブログ投稿とは別に、静的ページを作れる「ページ」機能があります。ページ機能を使うと、ブログの時系列とは関係なく固定して表示したいコンテンツを作成できます。 ページを作成しただけではサイトに表示されないので、テーマを修正し、ヘッダーのナビゲーションメニューに「アクセス」「メニュー」ページを追加します。 ページをメニューに表示するには、テンプレートタグを使います。メニュー項目をマークアップしているli要素を {block:HasPages} で囲むと、ページが1つ以上存在するときだけ、中の要素が出力
「Amazon Fire TV」登場—「Apple TV」がゲーム端末にならない理由 (1/2)
本連載「Apple Geeks」は、Apple製ハードウェア／ソフトウェア、またこれらの中核をなすOS X／iOSに関する解説を、余すことなくお贈りする連載です（連載目次はこちら）。 UNIX使い向けを始め、Apple関連テクノロジー情報を知りつくしたいユーザーに役立つ情報を提供します。 「Amazon Fire TV」の登場が意味するところ 米Amazonがストリーミングボックス「Amazon Fire TV」を発表した（関連記事）。SOCにはQualcomm Snapdragon 8064（Krait 300 クアッドコア1.7GHz＋Adreno 320）と2GBメモリ、HDMI 1.4b、Bluetooth 4.0を搭載。Wi-Fiは11a/b/g/n対応で、MIMOデュアルバンドという高スペックマシンだ。フルHD（1080p）のストリーミングに対応、Dolby Digital P
日本と世界の「レスポンシブWebデザイン」
マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWebデザイン レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。 マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
いまさら聞けない「Twitter Bootstrap」とは？ (1/2)
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。 そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。 この連載では、特にスタートアップで注目を浴びているフロントエンドツール「Twitter Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。まずはTwitter Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。 Twitter Bootstrapの特徴 Twitter Bootstrapは、米ツイッ
1億人のその先へ――LINEの海外展開の実情を聞く (1/3)
2013年1月に全世界のユーザーが1億人を突破したLINE。4月には、これまで開発運営を担当していたNHN Japanから商号変更し、LINE株式会社が生まれた。新体制のもとでライバルが先行する海外展開、そしてコミュニケーションツールからプラットフォームへの脱皮を図るLINE。その現状や戦略を、LINEの戦略責任者である執行役員の舛田淳氏に聞いた。 半年前のインタビューはこちら LINEとNHN Japan――分社化が海外展開に与える影響とは？ ―― 旧NHN Japanは4月1日に、LINE事業のLINE株式会社とゲーム事業のNHN Japan株式会社に分社化されました。LINE事業は日本のLINE株式会社が主導すると繰り返し説明されてきましたが、今後は何か変化があるのでしょうか？ 舛田 「今までもこの法人でLINEは開発され、運営してきましたので、それほど大きくは変わりませんが、LIN
jQueryでAjaxを利用する基本チュートリアル (3/4)
XMLデータを取得、加工して表示する テキストファイル、HTMLファイルの次は、いよいよXML形式のデータを扱ってみましょう。テキストファイルやHTMLは、読み込んだ内容をそのまま表示すればよいのですが、XMLは取得した内容を加工しないとHTMLとしてブラウザーが表示できません。XMLの取得／操作には、ajax()という命令を使います。 ajax()は以下のような書き方で使います。 $.ajax({ url: '取得するXMLファイル', dataType: 'xml', success : function(data){ //取得したファイルに対する処理 } }) これまでのjQueryの書き方とはちょっと違うので戸惑われたかもしれません。ajax()にはセレクターの指定はなく $. で始まり、括弧内の {...} に設定（オプション）を記述します。設定は左側に項目名を、右側には項目に対
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
foursquareは何を起こしているのか？――foursquare入門 (1/3)
【今週の1枚】foursquareのチェックイン数で世界第2位の駅に輝いた渋谷駅。アプリが日本語化される前から、渋谷を行き交う人々が駅にチェックインしており、朝は50人を超えるユーザーのチェックインと出会える 2011年2月9日に、KDDIはアメリカのFoursquare Labとの間で、日本での「foursquare」の展開で協力関係を結ぶことを発表した。また2月14日にはfoursquareのiPhoneアプリの日本語化もなされている。さて、この「foursquare」は一体どんなサービスなのか。そして日本での展開はどう広まっていくのだろうか。 世界中、さらには宇宙でも使われた「foursquare」 foursquareはスマートフォンでの位置情報を用いたソーシャルメディアと呼ぶべきサービスだ。BlackBerry／iPhone／AndroidといったGPSを搭載した主要スマートフォ
実は重要！ よくわかる電子書籍フォーマット規格!! (1/4)
一口に「電子書籍」といっても、実はそのフォーマット（データ形式）によってさまざまな種類が存在する。そのため、気に入った電子書籍を読む前に、その本がどのフォーマットのものなのか把握して、サポートしている閲覧用ソフト（あるいはハードウェア）を手に入れなければならない。いわば、VHS対ベータ、Blu-ray対HD DVDのような規格争いが電子書籍においても繰り返されており、主流となりそうなフォーマットはどれか、ある程度気に留めておく必要があるのだ。 ユーザーとしては悩ましいところだが、閲覧用端末を数多く売りたいメーカーの思惑、不正コピーは避けたいがより多く流通させたい出版社の本音、場所や時間を気にせず紙同様に楽しみたい消費者の心情、その狭間で落とし所を見つけようという努力の結果が、フォーマットとしての電子書籍だといえる。 電子書籍フォーマットは、いくつかの基準により分類できる。その分類を把握した
MS担当者が本音で語った「企業サイトとクラウド」 (1/4)
2010年のITキーワードは「クラウド」だろう。2011年も業界で多用されそうだが、いまだに中身のない「バズワード」と勘ぐる人も多い。特に企業サイトとクラウドの関係は、クラウドベンダーの思惑もあって、議論がかみ合わない傾向があるだろう。 Web Professional編集部では、ロフトワーク代表取締役社長の諏訪光洋氏とマイクロソフトの砂金信一郎氏がクラウドについて語ったチャットログを入手。大手企業サイトのWeb制作に強いロフトワークと、グローバルなクラウドベンダーであるマイクロソフトが、「企業サイトとクラウド」の中身を語っている。 「すぐ使える」、「従量課金」、「スケーラビリティ」がクラウドの3条件 諏訪光洋（以下、諏訪）：クラウドの定義から話しましょう。 砂金信一郎（以下、砂金）：定義は大事ですね。クラウドとは「すぐ使える AND 従量課金 AND スケーラビリティ」のことでしょう。3
リソースレコードの種類と役割とは (1/2)
DNSのネームサーバは、ドメイン名（及びホスト名）とIPアドレスの対応をデータベースとして保持している。このデータベースが持つデータを「リソースレコード」と呼ぶ。 このデータベースとリソースレコードの構造と形式は、DNSサーバソフトによって異なる。もっとも有名なDNSサーバソフトの「BIND」では、「ゾーンファイル」と呼ばれるデータベースをテキストファイルとして保持している。BINDでは、ゾーンファイルにホスト名とIPアドレスの対応などのリソースレコードを記述している。以下、BINDのゾーンファイルを基準に解説を進める。 リソースレコードにはいくつかの種類（レコードタイプ）が存在する。一般的に使用されている主なリソースレコードには次のものがある（図1）。 A（アドレス） CNAME（キャノニカルネーム） MX（メールエクスチェンジ） NS（ネームサーバ） SOA（スタートオブオーソリティ）
スマートフォン対応サイトの作り方、教えます (1/3)
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
ASCII.jp：Twitter APIとGAEでおもしろWebサービスを作ろう！ ｜Twitter＆Google App Engineで始めるWebプログラミング入門
みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか？ すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか？ そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine（以下GAE）」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 本連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門