Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況
ユーザーの目線でWebサイトを作ることは基本中の基本ですが、グローバルサイトを担当することになったら日本の常識を捨てて現地の状況を理解する必要があります。 アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。CalibreでWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅だったのかもわかりました。 ここ数年の進歩で、コンテンツをWebからダウンロードする速度は劇的に速くなりました。しかし、「HTMLをロードし、ほかのリソースを探してそれもロードする」という基本は変化していません。 世界中の約46.1%がインターネッ
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
ここが変わった！ PHP7.1で知っておきたい新機能まとめ
12月にリリースされたPHP 7.1はもうチェックしましたか？ Nullable型が追加されたり、戻り値にVoid型を指定できるようになったり、新機能がてんこ盛り。注目の新機能をコードを交えてまとめました。 PHP 7が発表され、魅力的な機能が追加されました。最新のPHP 7.1では、さらに役立つ機能が追加されています。本記事では、その中から重要な機能を紹介します。変更のすべてはPHP RFCをチェックしてください。 ArgumentCountErrorの追加 以前のPHPのバージョンでは、定義されているよりも少ない引数でメソッドをコールすると、引数が足りないという警告が表示されました。 // PHP 5.6 function sum($a, $b) { return $a + $b; } sum(); // Warning: Missing argument 1 for sum() //
JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック
相次ぐモダンなフレームワークの登場、脱jQueryの動き、ECMAScriptの進化など、SitePointの常連ライターが2016年のJavaScript事情を振り返ります。 2016年は、見方によっては歴史的であり、奇妙でもあり、楽しくもあり、恐怖でもあった年でした。JavaScriptだけに絞ると、ほかの大きな出来事に比べれば取るに足りない変化に見えますが、開発者にとっては重大な出来事でしょう。 JavaScriptの人気はとどまるところを知りません。すべての人に好かれる言語仕様ではありませんが、10年前のように馬鹿にされることはほとんど無くなりました。個人的にはJavaScriptが大好きです。そう、あのもどかしかった初期の頃からです。C++やJava、あるいはPHPから移ってきた人は最初は戸惑うでしょう。JavaScriptは取っ付きやすく見えますが、実はそうではありません。でも
Goで覗くシステムプログラミングの世界
プログラミングの勉強にあたってよく言われるのは、「流行に左右されるような技術の尻を追いかけるよりも、土台となる技術を身につけることが大切」ということです。 例えば、ウェブブラウザで動くJavaScriptを書くときは、流行しているライブラリの書き方を暗記するよりも、 ブラウザがどのようにCSSやHTMLを解釈してスクリーンに文字や絵を描き出していく（レンダリングしていく）のかを理解することが大切です。 さもないと、ライブラリの流行が変わるだけで勉強したスキルが失われてしまいかねません。 データベースでも同じことがいえます。SQLの文法を学ぶことよりも、データベースがどのようにスケジューリングを行い、 どのようにデータを探索していくのかを学ぶほうが、パフォーマンス・チューニングのコツなどもひらめきやすくなるでしょう 1 。 「土台となる技術を身につける」を、もう少しちゃんと言い換えれば、「今
volcaはKORGアナログシンセの集大成ではなくスタートだ (1/3)
点灯するパーツがやたらに多く、明かりを暗くするとやたらかっこいいvolcaシリーズ。本体の下部ケースもブラウンスモークの半透明樹脂で、基板上で点灯するLEDも透けて見える KORGの最新アナログ兵器「volca」シリーズのうち、「volca bass」と「volca beats」が、いよいよ6/23(日)発売となった。そこでシリーズの回路設計を担当したコルグの高橋達也さんと、企画を担当した坂巻匡彦さんのインタビューをお届けする。 volcaシリーズは単体のシーケンサー付きシンセやリズムマシンとして、あるいはMIDI INを使って、ライブパフォーマンスにおけるDAWの外部アナログ音源としても使える。そして3台揃えて、SYNC端子でつなげばアナログのElectribeのような構成になる。つまりモジュラー型のアナロググルーヴボックスでもあるのだ。 今回は、そのリズム部分を支える「beats」の話
ASCII.jp：たった4行で電話が作れるAPI「Twilio」とは？ (1/2)｜Twilioではじめるクラウド電話開発
Twilioは簡単に言うと、「Webから電話を簡単に操作できるAPI」です。ほとんどの連絡をメールやSNSで済ませるようになった昨今、「いまさら電話？」と思った方もいるかもしれません。しかし、エンジニアの視点から、またサービス企画の視点から見て、Twilioは実に多くの可能性を秘めたAPIなのです（筆者もまた、その可能性に注目している1人です）。 Twilioを使うと何ができるのか？ どんな可能性があるのか？ その魅力を、連載を通じて紹介しましょう。 まずはTwilioを体験してみよう Twilioとはどんなものなのか？ まずは手元の携帯電話などから以下の番号に電話をかけてみてください（通話料がかかります）。 電話につながると、ややぎこちない女性の声でメッセージが流れたと思います。実はこの自動応答システム、Twilioを使って、たった4行のコードだけで実現されています。 <?xml ver
enchant.jsで懐かしのインベーダーゲームを作ろう (1/4)
インベーダーゲームは、画面の上部から迫ってくる多数の敵キャラクター（インベーダー）を打ち倒すゲームです。敵を全滅させるとゲームクリアになり、逆に、敵が画面下まで到達するか、自機が撃たれるとゲームオーバーになります。インベーダーゲームの成功を受けて、ナムコの「ギャラクシアン」「ギャラガ」「ギャプラス」など、インベーダーゲームをベースにしたゲームが数多く登場しました。インベーダーゲームの成功により、今日のゲームの基礎が築かれたといってもよいかもしれません。 今回のJavaScriptラボは、前回に引き続き「enchant.js」を使って、インベーダータイプのゲームを作ります。インベーダーと同じように最初にすべての敵が画面に表示され、敵をすべて撃てばクリアになります。クリアすると再度敵が出現し、自機が撃たれるまで延々とゲームを繰り返します。 ブロック崩しからインベーダーゲームへ インベーダーゲー
Facebook APIでソーシャルなブロック崩しを作ろう (1/4)
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。前回作成したCanvasを使った「ブロック崩しゲーム」アプリをベースに、今回はGraph APIを使ってソーシャルグラフを取り入れた「ソーシャルブロック崩しゲーム」に仕上げます。Facebookモバイルアプリ、いよいよ完成です。 Step 1：処理の流れを確認する ブロック崩しのプログラムに、FacebookのGraph APIを利用して情報を取得する処理を加えます。具体的には、ブロックの画像部分をユーザーのフレンドのプロフィール画像に置き換えます。以下から完成版のデモをご覧ください。 元のブロック崩しゲームと比べると少し複雑になっているので、まずは全体の処理の流れを整理しておきましょう。 ■ブロック崩しゲームのおおまかな流れ 背景/ブロッ
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
世界を変える方法は山川の教科書に書いてある (1/2)
「世界を変えたい」とか「日本の教育行政を変えると日本を再生できる」とか、土日に最近の話題をざっと追いかけていてとても違和感があった。日本の義務教育（実態として義務化している高校も含めて）では世界を変える方法をきちんと教えているのだから、変えなければいけないのは教育行政ではなく、教科書に書かれていることを「自分事化」する教え方ではないのか、と思うのだ。 商品・サービスの設計方法 商品・サービスの設計方法は、3つしかない。ひとつは新しいニーズをいち早くつかみ、これまでにない商品・サービスを「発明」することだ。竪穴式住居の普及で一箇所に留まる時間が長くなり、食料を貯蔵するニーズから縄文土器が生まれたように、大量の音楽がデータ化されPCで楽しむようになった後、ハードディスクやフラッシュメモリーに音楽データを入れて携帯する「携帯型デジタル音楽プレイヤー」が生まれた。 ふたつめの方法は「改善」すること
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
CSS＋jQueryでクロスデバイスサイトを作ろう (1/4)
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト（HTML）はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する｢クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。 このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。 PCサイトのマ
jQuery Mobileのマークアップの基本とCSSの変更 (1/6)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に引き続き、簡単な会社案内サイトを作りながら、jQuery Mobileの基本的な使い方を学びましょう。 aboutページの作成とCSS3によるデザインの変更 今回はトップページ以下の詳細ページを順に作成していきます。まずは「to-Rについて」のページ（#about）から取り掛かりましょう。前回作成したindex.htmlに次のようなHTMLを追加します。「data-role="content"」の中にh2要素とp要素を加えただけの簡単なHTMLです。 ■サンプル1[HTML] <div data-role="page" id="about" data-theme="b"> <div data-role="header"> <h1>to-R</h1> </div> <div data-role="conte
JavaScriptで画像付きツールチップをカスタマイズ！ (1/3)
Webページ中のリンクや画像の上にマウスを重ねると表示されるツールチップ。HTMLタグにtitle属性を指定するだけで表示できるのでリンク先の内容や画像を紹介するのに便利ですが、デフォルトのツールチップだと見た目が素っ気ない。とはいえ、ツールチップの表示はWebブラウザーの機能なので、通常はWebサイト側ではデザインの変更などはできません。 そこで、独自のツールチップを表示するJavaScriptライブラリーの出番です。ツールチップを表示するライブラリーはいくつかありますが、今回は比較的使いやすく多機能な「qTip」を紹介しましょう。 qTipとは 「qTip」はクレイグ・トンプソン氏が開発しているライブラリーで、jQueryのプラグインとして動作します。本稿執筆時点の最新版は1.0.0-rc3で、jQuery 1.2.6以降に対応しています（jQuery 1.3以降を推奨）。qTipは以
使いこなせ！ 特選iGoogleガジェット集 (1/6)
特集第1～2回はブラウザー、第3回は無料メーラーと来て、3回目はGoogleが提供するユーザーベースの検索ポータル「iGoogle」だ。iGoogleの特徴は「ガジェット」と呼ばれる、小さな拡張機能ツールを貼り付けられること。アドオン、エクステンションといった拡張機能好きにはやはりたまらないものがある。 通常の場合、GmailであれTwitterであれニコ動であれ、1つのサービスは画面をまるごと使ってしまう。だが、iGoogleガジェットを使えばそれらの情報すべてを1つの画面にまとめられ、デスクトップ画面を広々と使えるようになる。 またiGoogleはGoogleのアカウントベースで管理するため、出先でもどこでも簡単に同じ環境でネットが楽しめるのも特徴の1つ。いちいち情報を同期させたり、データのインポートをしたりといった手間がない。 といったわけで今回は、iGoogleガジェットから実際に
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
Evernoteが進化 連携する16本のiPhoneアプリはコレ！
「Evernote」といえば、テキストや画像といったメモをオンラインに保存して、iPhone／パソコンの間でそのデータを手軽にシェアできるオンラインメモツールだ（iTunes Storeで見る）。 そのEvernoteでは現在、ほかのiPhoneアプリとの連携を進めている。これから対応するものも含めて連携できるアプリの一覧を入手したので、いち早く紹介したい。 3種類ある連携方法 iPhone版EvernoteとほかのiPhoneアプリとの連携方法は具体的に3種類あるようだ。 1つ目は、Evernoteが公開しているAPIの利用だ。このAPIを使えば、ほかのiPhoneアプリからEvernoteサーバーに直接、データを登録できる。 2つ目は、新たに用意した「EvernoteBridge」というアプリ連携の技術を利用する方法。あらかじめiPhoneにEvernoteをインストールしておけば、ほ
米Googleモバイル、位置情報と連動したキーワード入力補助機能を追加
米Googleは2010年1月14日、現在または直前の位置情報と連動して適切なキーワード候補を表示する機能を追加した。Android端末及びiPhone向けのGoogle検索サイトで利用できる。 ユーザの現在地または直前にいた場所情報と連動して、その地域のユーザの検索ニーズにあわせた検索キーワード候補を表示するように改良された。 たとえば、サンフランシスコにいるユーザがGoogle検索窓に "Muse"と入力し始めると、サンフランシスコ近郊の美術館に関するキーワード候補を表示する。しかし、ボストンで同じように "Muse"と打ち始めると、"museum of science boston" や "museum of fine arts boston" など、ボストンにいるユーザがよく探している検索キーワード候補を表示する。 携帯端末からの文字入力は時間がかかる場合がある。位置情報と連動して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEにも対応！10分でできるWebフォント実装法 (1/3)
