進化したJestのスナップショット機能でReactコンポーネントを効率よくテストする
「生まれ変わったFacebook製テストフレームワーク「Jest」とは何か？」に続き、テストフレームワーク「Jest」を使ったReactコンポーネントのテスト方法について解説します。特に、スナップショットを使ったテスト方法は必読です。 Reactコンポーネントをテストする 注目すべきは、デフォルトではReactコンポーネントにあまりたくさんテストを記述しすぎない方が良いことです。ビジネスロジックなどのかなり徹底的にテストしたいものは、前述のステート関数のテストのようにコンポーネントから引き出して独立した関数に置くべきです。 そうは言っても、Reactのインタラクションをテストするときには便利です（たとえばユーザーがボタンをクリックしたときに特定の関数が正しい引数で呼び出されるか確認するなど）。Reactコンポーネントが正しいデータをレンダリングしているかテストすることから始め、そのあとテス
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が含まれている
Reactでも使える！シンプルなJavaScriptステート管理ライブラリー Mobxを試す
Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。jQueryとReactを使ったサンプルコードで解説します。 あなたが開発したのがjQueryを使ったごくシンプルなアプリに過ぎなくても、UIのさまざまなパーツの同期を維持する問題に直面したことがあるはずです。たいていの場合、データを変更すると複数の箇所に反映する必要があり、アプリの規模が大きくなるにつれて対応が困難になります。この問題にうまく対処するには、イベントを利用して、アプリのさまざまなパーツに対して、変更があったことを知らせるのが一般的です。 それでは現在、多くの人はアプリケーションのステートをどのように管理しているのでしょうか。 「ステート」とはいったい何者なのか？ ある人物がこう言っています。「こんにちは、ぼくだよ！ ぼくにはfirstName、las
さくら、Dockerコンテナのホスティングサービス「Arukas」発表
さくらインターネットは4月27日、コンテナ型仮想化技術「Docker」を利用した新たなホスティングサービス「Arukas」の開発を発表した。無料で利用できるオープンベータテストを今年9月末まで実施中だ。 Arukasは、Docker環境で作成されたコンテナイメージ（Dockerイメージ）をホスティングし、アプリケーションをインターネットに公開できるサービス。複数のコンテナを管理しやすいGUI（Webコントロールパネル）のほか、コマンドラインインタフェース（CLI）、APIからも操作できる。 特定のレポジトリ（現在は「Docker Hub」のパブリックレポジトリに対応）にアップロードされているアプリケーションのコンテナを登録することができ、登録されたアプリケーションを起動すれば「最速15秒」でデプロイが完了し、アプリケーションが利用可能になるとしている。そのほか、サービス成長に応じたオンデマ
SendGridユーザーが語る！メール大量配信のここが落とし穴 (1/3)
個人向けのWebサービスを展開しているWeb事業者にとって、メールシステムの運用はきわめて重要だ。現場ではどのような苦労があるのか？ どのように活用しているのか？ クラウド型メール送信サービス「SendGrid」を検証・活用するWeb事業者のエンジニアを集めて、本音を聞いてみた。（以下、敬称略） dots.とコーチ・ユナイテッドがSendGridに至った経緯 構造計画研究所 SendGridエバンジェリスト 中井勘介（以下、構造計画研究所 中井）：クラウド型メールサービスSendGridの日本での販売を手がけている構造計画研究所の中井です。今回はSendGridを検討・導入しているおもにスタートアップの導入担当者の方に集まっていただき、メールシステムの導入や運用の苦労やクラウド型メールサービスの率直な感想をお聞きしたいと思います。まずは杉山さん、自己紹介からお願いします。 インテリジェンス
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の準備、
最終決定版！ ネットで役立つ定番フリーソフト｜超定番から上級者向けまで！ ネットツール徹底活用
動画や掲示板、オンラインストレージなど、普段から利用しているネットサービスは数多くある。これらのサービスのほとんどはブラウザーから利用でき、専用ソフトがいらないという手軽さが魅力だ。しかしその半面、動画のダウンロードができなかったり、サーバーが混むと接続できなくなったりと、不便に思うことも多々ある。 そこで今回紹介するのが、こういったネットサービスを便利にしてくれるフリーソフト。初心者でも安心して使いこなせるものから、機能を特化した便利ツールにいたるまで、動画、画像、音楽、コミュニケーション、ファイル管理の5つのテーマにわけて紹介していこう。 動画を楽しむ まずは見たい動画の検索やダウンロード、再生ができるソフトが基本。これにプラスして、携帯プレーヤーの形式へと変換してくれるツールを使えば、ダウンロードした画像を活用しやすくなる。また、自分で動画を作るときに便利なデスクトップ録画ソフトも紹
jQueryとも共存できる「Ext JS 3.0」入門 (1/4)
「デスクトップアプリケーション並みの美しいユーザーインターフェイスが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の最新版、「Ext JS 3.0」が7月6日にリリースされました。「古籏一浩のJavaScriptラボ」第4回は、実際に簡単なサンプルを作りながらExt JSの魅力に触れる入門記事をお届けします。 （編集部） Ext JSとは？ 「Ext JS」は、米Ext JS, LLCが公開しているオープンソース（※）のJavaScript/Ajaxフレームワークです。「フレームワーク？ ライブラリーなら聞いたことあるけど……」と首をかしげる人も多いかもしれません。「Prototype.js」や「jQuery」、「Yahoo UI Library」「MooTools」などの有名なJavaScript/Ajax“ライブラリー”に対して、Ext JSは“フレームワ
入門Ext JS：デスクトップ風メニューバーを表示しよう (1/5)
JavaScript/Ajaxフレームワーク「Ext JS」を使えば、使い勝手のいいユーザーインターフェイス（UI）を、短いコードを書くだけで実装できます。前回の記事では、Ext JSのウィンドウ内にGoogleマップを利用した地図を表示する方法を紹介しました。今回は同じウィンドウに、地図の種類（航空写真や地形など）を選択できるオリジナルのメニューを組み込んでみましょう。 ウィンドウ内にメニューバーを表示する Ext JSでは、ページ全体またはExt JSで開いたウィンドウに対して、デスクトップアプリケーションのようなメニューバーを表示できます。メニューバーは自由度が高く、上部／下部のいずれか、または両方に設置でき、階層型のサブメニューやアイコン付きメニューも作成できます。 今回は、Googleマップに用意されている以下の4種類の地図を切り替えるメニューをウィンドウに表示します。 通常の地
Ext JSでGoogleマップを表示するチュートリアル (1/4)
統一された美しいデザインのユーザーインターフェイス（UI）を作れるJavaScript/Ajaxフレームワーク「Ext JS」。前回は、Ext JSを使ったもっとも簡単なサンプルとして「アラートダイアログ」を表示してみましたが、今回はより実用的な「ウィンドウ」の表示に挑戦しましょう。Ext JSで開いたウィンドウの中に、GoogleマップAPIを利用した地図を表示します。 単純なウィンドウを表示する 最初に、もっともシンプルなウィンドウを表示してみましょう。Ext JSのウィンドウには非常に多くのオプション（設定）がありますが、オプションを指定しない状態でもとりあえず表示はできます。 ウィンドウを表示するには、new Ext.Window() によりインスタンス（ウィンドウオブジェクト）を作成した後、show()メソッドによって実際に画面上に表示する、という手順をとります。ウィンドウを表示
入門Ext JS：グリッドパネルの使い方をマスター (1/5)
デスクトップアプリ並のUIをWeb上で実現するJavaScript/Ajaxフレームワーク「Ext JS」入門の最終回は、XMLデータの処理とグリッドパネルを扱います。前回までに解説したGoogleマップを表示するスクリプトと組み合わせて、地図と連動する簡単なWebサイトを完成させましょう。 Ext JSでXMLデータを処理する 最近ではJavaScriptで扱いやすいJSON（JavaScript Object Notation）形式のデータが多く使われていますが、すでにあるXML形式のデータを活用したいこともあります。Ext JSはXMLデータもJSONデータ同様、手軽に扱えるので、今回はXMLデータを読み込んでグリッドパネルに表示し、表示された項目がクリックされたら該当場所の地図を表示するサイトを作成します。事業所や店舗などのXMLデータがあれば、そのまま実運用もできるでしょう。
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
ASCII.jp：IllustratorもJavaScriptで自由自在に！｜古籏一浩のJavaScriptラボ
JavaScriptやPythonなどのスクリプト言語を使ってアプリケーションを制御するのは、いまや珍しいことではありません。本連載の第3回では、Photoshop上で動くJavaScriptについて紹介しましたが、アドビのアプリケーション（旧マクロメディア製品を除く）でもっとも早くJavaScriptに対応したのが「Illustrator」です。Illustratorは2001年に発売されたバージョン10からJavaScriptによる制御に正式に対応し、それまで手作業でしていた面倒な処理を自動化できるようになりました。 今回は、IllustratorをJavaScriptで制御する方法について紹介します。最終的には作例として「百ます計算」の表を完成させます。百ます計算とは、左側と上側にある数値の合計を10×10のマス目に記入していくもので、集中力を高める手法として小学校などで使われていま
ASCII.jp：絶対入れたいFirefoxアドオン最強50選
初心者から上級者まで、今使うべきアドオン50を徹底紹介 次世代ブラウザー、Firefoxの魅力は快適な動作速度（関連記事）だけではなく、ユーザーの好みに合わせて機能を拡張できる「アドオン」の存在だ。とはいえ5000以上もあふれるアドオンの海から自分に合ったものを選ぶのは至難のワザ。まずは鉄板の定番アドオンを導入し、そこから自分仕様にカスタマイズしていきたい。 そこで今回は使用シーンに合わせ、筆者が勧める50のアドオンを徹底的に紹介。インストールしたばかりのFirefox初心者はもちろん、Greasemonkey（グリースモンキー、詳しくは後述）を使いこなしている上級者にもぜひ使ってもらいたいものを集めてきた。
jQueryアニメ＆エフェクト合わせ技で画像を拡大 (1/5)
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
FlashではなくjQueryで！インパクトのあるUIを作ろう (1/5)
もう間もなく投開票を迎える米国の大統領選挙。候補者である共和党のジョン・マケイン氏、民主党のバラック・オバマ氏の両者のWebサイトを見ると、インターネットを重要な選挙ツールとして位置づけていることが伺えます。ネットを使った選挙活動が制限されている日本とは事情が異なるせいもあるでしょうが、両者ともに公式サイトの充実ぶりがすごいのです。ブログや動画の活用は当たり前。グッズのネットショップや、サポーター向けのコミュニティ機能など、ちょっとしたポータルサイトのような凝った作りです。 そんな気合の入ったWebサイトだけに、デザインの面でも参考になる面が多々あります。今回は特に、Ajaxを活用したユーザーインターフェイスを持つ、オバマ候補の公式サイトをお手本とさせていただきましょう。 今回のお手本サイト： 『Barack Obama and Joe Biden』 11月4日に開催される米国大統領選挙に
落札価格が2倍に?! オークション撮影5つの基本 (1/6)
ここがヘンだよ、オークションの写真！ オークションサイトの出品物を見ていると、少しでも注目されようとタイトルに「★☆」「■□」といった記号を入れていたり、検索用タームをクサるほど本文に入れたりしているものが目立つ。売りたい気持ちはわかるが、ちょっと逆効果なんじゃないか。 特に中古品の製品説明で「キズなし」「美品」とか連呼されていても、個人の主観によるところが大きい。購入してからキズが思ったより多いとか、意外と汚れているなどとトラブルになることを防ぐためには、ちゃんとした写真を提示するのが一番だ。 筆者も使わなくなったアイテムをいくつも出品してきているが、経験則からしても、やはり写真写りのよかったもののほうが高値で落札されやすい。 今回は細かい撮影技術以前の、基本となる「5大テクニック」を扱う。これらがなぜオークション撮影に効果的なのかを説明しつつ、撮影例を披露していこう。また、記事の最後で
ASCII.jp：
アクセスランキング トピックス LINE新機能「スタンプアレンジ」の使い方 ヤバい組み合わせができて楽しい トピックス グーグル「Chrome」に重大なゼロデイ脆弱性 すぐ更新を iPhone アップル「iOS 18」ホーム画面のアイコンを自由に配置できるように? iPhone アップル「iPhone 17 Slim」2024年発売か トピックス 自動車税支払いで最大30％還元!? 驚愕のキャンペーン、わかりやすく解説します iPhone アップル新型「iPad Pro」実物を見たら欲しくてたまらなくなった AI まるで“いけない話ができるChatGPT” ローカルAI「Command R+」の爆発的な可能性 デジタル 家で使っているルーターが乗っ取られて「ゾンビ」になる!? 気をつけることは トピックス LINE、複数のスタンプを組み合わせて送れる新機能 iPhone 「iOS 17.5
これが定番iPhoneアプリだ（後編）
前編に続き、後編では「ゲーム」と「その他」のアプリを紹介していこう。iPhoneでは、内蔵のセンサーやタッチパネルをうまく活用したゲームが続々と登場している。指で画面をタッチしたり、iPhone自体を傾けたり、ときには振ったり……。既存の携帯ゲームにはない楽しさをぜひ味わってほしい。 その他、注目したいのは、小粋なジョークアプリ、役に立たないけど眺めているだけで楽しいアプリが異常なほど充実しているという点（この状態のApp Storeを見て、「まるでMac OS 9時代のよう」と評する人もいる）。iPhoneを人に見せびらかす際は、いくつか見つくろってインストールしておくといいだろう。なお、ソフトのインデックスについては、前編に追加した。 ＊各ソフトのヘッダーについて 各ソフトのバージョン/価格/機能は、執筆時点のものです。記事公開後に最新版がリリースされ、機能が変わっている可能性がありま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
