まったくの初学者はJavaScriptをどう学ぶべきか？ 失敗しない学習法を考えてみた
動くモノを作るのは確かに楽しい。でもまったくの基礎を持たない状態でスライドショーを作ることは、JavaScriptを学習するのに良い方法と言えるのでしょうか？ 「ただプロジェクトをやってみる」というアドバイスはJavaScriptを学習する者にとって、もっとも驚くほど危険な言葉の1つです。 誤解を避けるために言っておけば、プロジェクトがコーディング言語学習にとってすばらしい方法であることは確かです（『最新技術を学び続けるのは疲れる？ フロントエンド開発者なら変化を楽しもう』参照）。しかし、なにが良いのか判断できるだけの基礎知識が十分にないまま特定のプロジェクトを始めると、問題が起こります。 これは大事なポイントです。なぜなら、プロジェクトへの挑戦を急いで始めてしまうと、多くの人がJavaScriptの学習を完全にあきらめてしまう原因の1つになるからです。 失敗をして欲しくないので、次のよう
Web開発者は本当に対応するべきか？ Googleが提唱するPWAとは？
Web上でPWAについて検索をすると、さまざまな相反する情報や判断基準が表示されます。PWAを定義するには、テクニカルな面でこれから紹介する4つの基準があり、Google Chrome、Opera、Samsungのブラウザーが対応しています。 この4つの基準を満たせば、開発者は望み通り自由に機能をカスタマイズでき、オフラインでのエラーページやオフラインでのブラウジングが可能になります。 プログレッシブになるための条件 Webサイトが、サーバー上にPWAがあると認識されるためには、ユーザーに「Add To Home Screen（ホームスクリーンに追加）」と表示することも含めて、次の4つの条件がグーグルによって定められています。 ユーザーが5分以上間隔を空けて2回訪れるか HTTPSをサポートしているか 有効なJSONのマニフェストが含まれているか Service Workerが含まれている
Java入門書、ベストな選び方の、その先へ
株式会社ヤザワ 代表取締役、グレープシティ株式会社 アドバイザリースタッフ。パッケージソフトの開発と販売に従事しつつ、執筆活動と講演活動も精力的にこなす、自称「ソフトウェア芸人」である。 高橋征義 高橋： はい。そのへんの工夫を最初にしたのが、『やさしいJava』と、結城さんの『Java言語プログラミングレッスン』の2冊だったわけです。2000年ごろに、これらの本でいろんな工夫があって、それが実際に成功した感じです。 遠藤： 2000年ごろまでは、こういう入門書は、少なくともJavaの本では存在しなかったんだ。 鹿野： アプリケーション解説書だと「できる」シリーズ編集注1とかがありましたよね。ひょっとしたら、「できる」シリーズの作り込みの発想をプログラミング言語の本にも取り入れたのが、このへんのゼロ年代の入門書なのかも。 矢澤： こう見ていくと、入門書の変化の歴史ってのは意外に新しいんだな
Reactアプリのコードを美しく保つ「高階コンポーネント」の考え方とは？
Reactアプリケーションを整理して構築し、保守を簡単にするためにHigher-Order Componentsを使用する方法について説明します。純粋関数でコードをクリーンに保つ方法や、同じ原理をReactコンポーネントに適用する方法を紹介します。 純粋関数 以下のプロパティに従っている場合、その関数は純粋であると見なされます。 取り扱うすべてのデータが引数として宣言されている 与えられたデータやその他のデータを変化させない（多くの場合、副作用と呼ばれる） 同じ入力には、常に同じ出力を返す たとえば、以下のadd関数は純粋です。 function add(x, y) { return x + y; } しかし以下のbadAdd関数は純粋ではありません。 var y = 2; function badAdd(x) { return x + y; } badAdd関数は直接与えられていないデー
12gと超軽量なカナル型Bluetoothイヤフォン「ANTS」
Hameeは2月5日、通販サイト「Hameeストラップヤ」で約12gと軽量でBluetooth接続に対応するイヤフォンマイク「ANTS（アンツ）」の予約販売を開始した。価格は4320円で、3月下旬に入荷予定。 ANTSは、Bluetooth接続するためのレシーバーを本体に組み込むことで、イヤフォン部分の小型化を実現。ケーブル一体型のコントローラーで着信応答や曲送り／戻し 、音量調節が可能だ。短くからみにくいフラットケーブルを採用し、コードの取り回しを気にすることなく使用できるとしている。 イヤフォンはカナル型で、周波数帯域は20Hz～20KHz、感度は110dB、インピーダンスは16Ω、通信距離は最大10m。約4時間の音楽再生、約5時間の連続通話が可能で、待機時間は約100時間となっている。イヤーキャップ（S×1、M×1）が付属する。カラバリはブラック／ホワイト／レッドの3色をラインアップ
なれる！ＳＥ 間違いだらけの？ＩＴ用語辞典（中二版）
IT用語ってちょっとアレな単語多くない!? そんなふうに思ったことはないだろうか？ 本企画は、電撃文庫の異色作『なれる！ＳＥ』の主人公＆ヒロイン、桜坂工兵と室見立華による“中二っぽい”IT用語の解説コーナーだ。なれる！ＳＥはシステムエンジニアの過酷な実態をコミカルに描いた作品。本編と合わせて読むとなお楽しい!? （毎週木曜更新予定） 2014年01月30日 18時00分 トピックス 最終回 IT業界の夢とロマンが詰まった、最終回なIT用語！ システムエンジニアの過酷な実態をコミカルに描く電撃文庫の異色作『なれる！SE』。本企画は、その主人公＆ヒロインである桜坂工兵と室見立華による“中二っぽい”IT用語の解説コーナーもついに最終回！ 2014年01月23日 18時00分 トピックス 第43回 業界人は軍事用語好き？ やっぱり中二病なんですかね、なIT用語 今日は……重大なお知らせがあります！
たった555gの“iPad mini Air”を実現するキーボードを衝動買い (1/3)
今まで数えるのが面倒になるほどたくさんのiPad用外付けキーボードを買ってきたが、飽き症の筆者が長続きした外付けキーボードはほとんど無かった。 本来、キーボードレスでも一人前に働くことを目的に作られたタブレットで、キーボードを一緒に使って便利かつ生産的に活用するには、“慣れが先”か“飽きるのが先”かという問題が必ず登場してくる。 自宅に大型液晶のデスクトップPCを据え置き、一切のモバイルPCをなくしてから、もっぱらモバイル環境でのビューワーとメールクライアントは、AndroidタブレットかSIMフリーのiPad 2だった。 プレゼンチャートをオン・ザ・ウェイで作ることはさすがになくなったが、たまにどうしても長文のメールを打つ必要があったり、複雑な引用作業や添付操作などが必要だったりすることはまだまだ多い。長年慣れ親しんだモバイルPCであれば大した作業ではないことが、慣れないiPadで行なう
ブラウザーにファイルを残せるFile system APIの使い方 (1/5)
HTML5では、Web StorageやWeb SQL/Indexed DBといった、JavaScriptでクライアントサイド（ブラウザー）にデータを保存する機能があります。今回紹介する「File system API」もそんな機能の1つですが、MacやWindowsのようなディレクトリを持ったファイルシステムにデータをファイルとして保存できます。 File system APIを使うと、Canvasに描いた画像をファイルとしてブラウザーに保存する、といったことができます。現在のところ、「Google Chrome」と、Android 4の「Chrome for Android」だけで利用できますが、特にスマートフォンでファイルが扱えるのは便利でしょう。 今回は、File system APIを使って簡単なファイラーを作ります。File system APIは非同期処理が多く、掲載している
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
スマートフォンサイトをデザインする7つのポイント (1/3)
Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ
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> ボタン全体にリンクを貼る ページ内リンクを設定したサ
もう画像は要らない！CSS3で作る申し込みボタン (1/4)
CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。 「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。 CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプ
高解像度とタッチが光るUSBモニター LCD-USB10XB-T (1/3)
コンパクトなサイズとUSBケーブルだけで使える手軽さで、サブディスプレーとして地味ながら人気の製品が小型のUSBディスプレーだ。しかし、現在市販されている大半の製品は、7型ワイドサイズで解像度が800×480ドット。サイズはともかく解像度がかなり低いため、用途はかなり限られてしまう。 アイ・オー・データ機器が発売した「LCD-USB10XB-T」は、USBディスプレーとしては大きめのサイズと高解像度画面に加えて、タッチパネル操作の機能を搭載する注目の製品である。 ミニUSBディスプレーでは初の1024×600ドット ACアダプターは必須 LCD-USB10XB-Tは、10型ワイドサイズ、解像度1024×600ドットのディスプレーパネルを採用するUSBディスプレーである。画面のサイズや解像度は、ネットブック並みだ。内蔵するディスプレーコントローラーには、USB接続型では定番のDisplayL
ザウルスの魂を受け継ぐ「GALAPAGOS」──緊急座談会 (1/4)
左よりアスキー総研の遠藤諭氏、ニフティのPDAフォーラムで管理人をつとめていた「みのたん」氏、シャープの鎌田慶一氏。ザウルスを知り尽くしたこのメンバーで、GALAPAGOSについて語った 10日、シャープは満を持してメディアタブレット「GALAPAGOS」を発売した。電車内で電子書籍などを読むのにぴったりな新書サイズの5.5型モバイルモデルと、見開きで雑誌を読むこともできる10.8型ホームモデルという2種類のラインアップ。日本の電子書籍業界に新たな価値を投じる製品として、大きな注目を浴びている。 一方でシャープといえば、1990年代に登場し、電子手帳・PDAの市場を大いに盛り上げた「ザウルス」シリーズを思い浮かべる読者も多いはず。GALAPAGOSシリーズでも使用するXMDF（電子書籍用フォーマット）はこのザウルスで培われたものであった。GALAPAGOSには、そんなザウルスの経験が多く盛
JavaScriptで並列処理ができる「Web Workers」 (1/5)
HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。 しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。 そこで、ブラウザーで複数の処理を並行して実行させる
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
描いた画像をファイルに保存する ここまでで、最低限の機能を持つお絵かきツールができました。ここからさらに機能を追加していきたいところですが、その前に「描いた画像を保存する」機能を付けておきましょう。 Canvasに描いたデータは、どのような方法で保存したらよいのでしょうか。Webブラウザーには、ページ内で生成されたデータを保存する機能はありません。せっかくCanvasで絵を描いても、それを保存する手段が標準では存在しないのです。そのため、もっとも簡単で、OSに関係なく確実に保存できる手段は、画面をキャプチャーする、ということになります。 画面キャプチャーでも悪くはないのですが、ここではほかの方法を考えます。Firefox／Safari／Operaに用意されているJavaScriptのdataスキーム（data:）を使用する方法です。dataスキームを利用すると、Canvasに描いた画像をデ
File APIでブラウザーからローカルファイルを操作 (1/5)
W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。今回のJavaScriptラボはこのFile APIを使って、ブラウザー上にファイルの内容を表示してみましょう。テキストファイルの内容をそのまま表示するサンプルと、バイナリファイルを16進数データの羅列（バイナリダンプ、ダンプリスト）として表示するサンプルを作成します。 File APIの対応ブラウザー File APIは2010年10月現在、以下のブラウザーで利用できます。 Firefox 3.6 / 4β Google Chrome 6 このほか、Safari 5が、File APIを使ったファイル情報（ファイル名やファイルサイズなど）の取得に対応していますが、ファイル内容へのアクセスはできないので今回作成するサンプルは動作し
HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
HTML5のCanvasで作る、Flash不要のお絵かきツール (1/5)
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実践！iPhone＆Androidサイト制作ガイド
