進行管理に便利なディレクトリマップの作成方法
ディレクトリマップとは、Webサイトを構成するすべてのページを書き出してまとめた一覧表のことです。ページリストと呼ばれることもあります。 ディレクトリマップでは、サイトマップによって決定したサイトの構造を元に、より詳細なページ単位の仕様を定義していきます。ディレクトリマップは、制作チームのメンバーにとって、実制作を進めていく上での拠りどころとなる重要な資料になりますので、慎重に作成しましょう。 ディレクトリマップで定義する内容 ディレクトリマップは、一般的に、ページ名称、ページID、ページの階層、ファイル名などの項目で構成されます。これらの内容は、サイトマップやワイヤーフレームなどの資料と連動して、各資料で示されているページがどのページなのかを簡単に紐づけられるように作成しなければなりません。 ほかにも、サイトの規模やプロジェクトによって、現行ページのURL（リニューアルの場合）、メタタグ
誰もがシステム開発者！ノンコーディングで使える「Logic Apps」を試そう
こんにちは。Azure MVPの松本典子です。この連載では、マイクロソフトが提供する「Azure Logic Apps」について、3回に分けて説明していきます。第1回目は、Logic Appsとは何なのか、何ができるサービスなのかを中心に紹介します。 Logic Appsとは？ Logic Appsは、ノンコーディングで多くのアプリケーションやWebサービスを結合して連携システムを作ることができる、iPaaS（Integration Platform as a Service）とも呼ばれるサービスです。2016年7月にAzureのサービスの1つとして一般提供（GA）が開始され、現在はAzureの東日本・西日本リージョンでも利用可能になっています。 ノンコーディングでサービスを結合するLogic Appsに似たサービスには、IFTTT（イフト）やmyThingsなどがありますが、Logic
年商10億円のWeb制作会社社長が「業界の破壊」に取り組む理由
オーストラリアのスタートアップ、Foxleyは世界的にはまだ無名の小さな企業ですが、Web制作業界を変えるプラットフォームの開発に取り組んでいます。Webデザイナーとして年商900万ドル（約10億円）の制作会社を育てたBiancaが起業した理由とは？ クライアントのWebデザイナーへの要求は増えています。マーケティングやSEO（検索エンジン最適化）からモバイル最適化に至るまで、クライアントはカスタマーにとってのROI（投資利益率）を求めるようになってきているのです。しかし、WebデザイナーはROIについての基礎的な訓練すら受けていないので、その要求に応えられません。 結果として、クライアントとデザイナーの関係が悪化するだけではなく、まともにROIを稼げるプロダクトを作ることさえできなくなってしまうのです。 言い換えれば、大変な時間の無駄ということです。 こうした両者の葛藤に目をつけたのが、
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
まだテーブルで消耗してるの？ 用途で選ぶWordPressプラグイン10選
手作業で作るにはあまりにも面倒なのが、テーブル（表組み）ですよね。そこで、 WordPressで使えるテーブルプラグインをタイプ別に厳選して紹介します。 テーブル（表）は、Webサイトの情報を整理して分かりやすく表示するのに最適な表現方法です。WordPressにはとにかくたくさんのテーブルプラグインがあるので、どれを使えばよいかは悩ましいところです。 本記事はWordPressテーブルプラグインの徹底ガイドです。テーブルレイアウトを活かす方法とプラグインの種類を解説します。最後にWordPressテーブルプラグインのベスト10を、手短な構築手順とともに紹介します。 読み終えるころには、プラグインの選び方、導入方法と使い方も理解できるはずです。 なぜWordPressのサイトにテーブルを使うのか テーブルは構造化されたデータを表示するのに適しています。テーブルの利点を考えると、あまりに多く
jQueryはもうイヤだ！ネイティブJavaScriptでBootstrapを使い続ける方法
「jQueryへ依存せずにBootstrapを使いたい」そんなときは、ネイティブJavaScript化する「Native JavaScript for Bootstrap」プロジェクトをチェックしてみるといかもしれません。 BootstrapのJavaScriptコンポーネントを使うよりも、実はVanilla JavaScript（編注：素のJavaScriptのこと）が好きだという人がいます。もしそうなら、ネイティブJavaScriptのBootstrapプロジェクトがおすすめです。このプロジェクトは、コンポーネントのうちjQueryで書かれている部分を素のJavaScriptに移植して、jQueryへの依存をなくすことを目指しています。 目的 移植する狙いのほとんどはパフォーマンスのためです。 数多くのベンチマークが示すとおり素のJavaScriptはjQueryより高速に実行できるの
Web制作者なら絶対押さえたい、HTML 5.1勧告で生き残った新機能7つ
11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか？ 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HTML 5スタンダードを意気揚々と使ったWebサイトをいまでも見かけることがあります。 幸い、HTMLの次のアップデートまでそう長くはかかりませんでした。2015年10月、W3CはHTML5で未解決となっていたいくつかの問題の修復を目的としたHTML 5.1ドラフトの策定に着手しました。多くのアップデートを経て2016年6月に「勧告候補（Candidate Recommendation）」、2016
フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ
サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
テーブル（表組み）をかっこよく、使いやすく表示するJavaScriptライブラリーはたくさんありますが、決定版になりそうなのが「Tabulator」です。JSONデータを簡単に読み込めるので、更新が必要なサイトやアプリにおすすめ。 標準HTMLのテーブル（table）は、複数の基本的なデータをレイアウトするのにとても便利ですが、テーブルにもっとほかの使い道がないでしょうか。外部APIからデータを取得したり、テーブルをソートあるいは編集可能にしたりする必要があるなら、もう少し気の利いたものが必要です。 思い当たることがあるなら、Tabulatorはおすすめのライブラリーです。Tabulatorは複雑なインタラクティブなテーブルの構築を簡単にするために設計された軽量なjQuery UIプラグインです。数行のJavaScriptで、ほぼすべてのデータソースをきれいにフォーマットされたインタラクテ
フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10
変化の早いフロントエンド界隈でいま押さえておきたい、最新のJavaScript関連記事をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。
さくらインターネット、超高速WordPress環境「KUSANAGI」を「さくらのVPS」で実行可能に
さくらインターネットは10月31日、プライム・ストラテジーが開発した超高速WordPress仮想マシン「KUSANAGI（くさなぎ）」を「さくらのVPS」で実行できる「KUSANAGI for さくらのVPS」の提供を開始した。 KUSANAGIは、WordPressを高速に動作させるための仮想マシンおよびそのイメージ。WordPressの実行時間3ミリ秒台、秒間1000リクエストをページキャッシュ非使用で実現するという。 KUSANAGI for さくらのVPSでは、さくらのVPSのコントロールパネルから、「CentOS 7（64bit）」上に「KUSANAGI」がインストールされたサーバーを簡単に作成可能だとしている。追加料金不要で導入可能なため、企業のウェブサイトはもちろんのこと、個人のブログにおいても、より快適にWordPress環境を利用できるという。
「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI
JavaScriptエンジニアなら知ってるよね？ エラー処理のいい書き方、悪い書き方
JavaScriptのエラー処理、ちゃんと書いていますか？ エラーを無視せず、どこに問題があるのか、きちんと確認できるコードの書き方をデモで紹介。 この記事はTim SeverienとMoritz Krögerが査読を担当しています。最良の記事を提供することができ、SitePointの査読担当者の皆さんに感謝します。 JavaScriptのエラー処理には危険が潜んでことを知っていますか？ もしマーフィーの法則を信頼しているとしたら、不具合が生じる可能性が本当に高いです！ この記事では、JavaScriptのエラー処理について考え、その落とし穴から便利な実践例までを説明します。さらに最後には、非同期コードとAjaxにも触れます。 JavaScriptはイベント駆動型プログラムで、プログラミングをより豊かなものにしてくれます。ブラウザーをイベント駆動型プログラムと考えると、発生するエラーは同一
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
UXデザイナーにもできるWeb高速化 「体感速度」改善3つのヒント
Webサイトの高速化といえば、フロントエンドやバックエンドのテクニカルな改善の話になりがちですが、「体感速度」の視点で考えると、UXデザイナーにもできることがあります。 もしWebデザインの「最優先事項」がUXだったら、「スピード」が一番重要ではないでしょうか。ユーザーは素早く操作していて、ロードもすぐに終わることを期待しています。私たちはミリ秒単位の世界に身を置いているのです。 しかし、おもしろいいことに、「実際のロード時間は長くないのに、体感スピードが遅いことがある」という調査結果があります。 ユーザーはロード時間をストップウォッチで測るのではなく、あくまでも感覚で測っています。つまり、Webサイトを実際よりも速く感じさせる方法もあるということです。逆に言えば、実際よりも遅く感じさせてしまう可能性もあります。もちろんそれは避けたいことです。 コンバージョン後のことも忘れないでください。
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。 「リンティング（linting）」という言葉に聞き覚えはありますか？ コードの潜在的問題を自動的に確認するためのツール（リンター）を使ったプロセスのことです。このようなツールを使用することで生まれる、重要なメリットがいくつかあります。 コードスタイルの一貫性を保つ：スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる 潜在的エラーや良くないパターンを見分けられる：リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度
利用率1位は「AbemaTV」 10代はスマホでTVを見る
ジャストシステムは9月13日、マーケティングリサーチに関する情報サイト「Marketing Research Camp（マーケティング・リサーチ・キャンプ）」で、ネットリサーチサービス「Fastask」を利用して実施した「モバイル＆ソーシャルメディア月次定点調査（2016年8月度）」の結果を発表した。調査対象は、15歳～69歳の男女1100名。 調査の結果、10代スマホユーザーで、スマホで直近1ヵ月以内に確認したEメールの種類が「プライベートと仕事関係の両方」の人は30.9％、「プライベートのみ」の人は34.0％だった。一方、「仕事関係のみ」の人は5.3％、「チェックしていない」人が12.8％、「あてはまるものはない」人が17.0％で、合わせて35.1％の人は、プライベートのEメールをスマホから確認しておらず、私的なやりとりはEメール以外の方法で行なっている様子がうかがえる。 直近1ヵ月以
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
まだSEO会社に頼んでるの？これなら自分でできる外部SEO、4つのアプローチ
さすがにいまどきリンク買うなんてことはないと思いますが、被リンクを増やすのに苦労している…というマーケターさんへ。ちょっと別の視点で考える、オフページ（外部） SEO施策について。 オフページSEOが話題になっているとき、たいてい話されるのはリンクビルディング（被リンク獲得）についてです。それは実にもっともなことで、価値の高いリンクの被リンク作成はSEOの要の1つだからです。しかし、リンクビルディングだけがオフページSEOではありません。Webサイトのトラフィック運用を効率化するだけでなく、オフページを引き起こし、Webサイトの信頼性やオーソリティ、検索結果のランキング順位を向上させるには、いろいろな最適化方法があります。 この記事では、Webサイトのオフページ要素を整えて検索結果でのポジションを管理し、ランク順位を上げるための方法についていくつか説明します。すべて、新しいリンクを作らずに
Ruby超入門（前編）
こんにちは。 この連載では、ちょっと変わったRuby入門を書いていきます。 想定読者は、Rubyを学びたいプログラミング初心者です。 Ruby以外の言語でプログラミングしたことがあると理解がはかどると思いますが、 Rubyを知らなくてもわかるように、なるべく丁寧に説明していくつもりです。 Rubyをある程度知っている読者には、最初の数回は退屈かもしれませんが、 回を重ねていくにつれ、より深くRubyを知ることができるはずです。 Rubyとは？ Rubyは「プログラミング言語」です。 プログラミング言語とは、コンピュータにやらせたい仕事を書くための言語です。 つまり、Rubyを覚えて、Rubyでコンピュータへの指示を書けば、 コンピュータはその指示を実行してくれます。 この指示書のことを「プログラム」と言い、特にRubyで書かれたプログラムを「Rubyプログラム」と言います。 ところで、Ru
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
