Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
Web業界的には、iOS 11.3最大の特徴はSafariでのPWAサポート開始だ！ | 初代編集長ブログ―安田英久
「PWA」は、アプリ的な機能をWebで実現する仕組みWeb担当者さんのなかには「PWA」という言葉にまだなじみがない方も多いかもしれません。 わかりやすく説明すると、「PWA」とは、スマホアプリのような機能や動作をWebサイトで実現するための仕組みです（「Progressive Web Apps（プログレッシブ ウェブ アプリ）」の略）。 ウェブ標準として定められている仕様に則ってHTML＋CSS＋JavaScriptで動的なサイトを作れば、 アプリストアを通さなくてもWebサイト経由で利用できスマホのホームスクリーンに起動アイコンを追加してアプリのような全画面で起動でき（ブラウザのURLバーなど非表示）ネットワーク接続がなくてもコンテンツを表示でき（キャッシュを活用）プッシュ通知もサイトから送れるそんな「アプリ的な」ものを実現できるというもの。 一番のポイントは「サクサク動くインターフェ
快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA
エクセルのカラースケール(ヒートマップ)の使い方 色分けで数値を見やすく | 初代編集長ブログ―安田英久
どういうものかというと、Excelのデータ表で範囲を指定してこれを設定すると、その範囲内での数値の大小で色分けしたりアイコンを表示したり、各セルの数値の大きさに応じた長さの棒グラフ的なバーを背景に表示したりしてくれるものです。 また、「上位10項目」などの条件でセルに色を付けたりすることも可能。 こうした条件書式の機能は、Excel 2007から追加されていたようです。ずっと使っていたくせに、今頃知りました……。昔から使っているExcelでこんな便利な機能が付いているなんて、想像してなかったですからね……。 使い方はかんたん。Excelのデータ表で、わかりやすい表示にしたい範囲を選んで、リボンの［ホーム］タブにある［スタイル］の［条件付き書式］から色つけのスタイルを選ぶだけです。 表全体を選んで指定すると、全体の数値範囲に基づいて処理されるので、列ごととかに設定していくのが基本ですね。次の
インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
メンテナンス中画面を出す正しい作法と.htaccessの書き方 | Web担当者Forum
今回は、Webサイトやサービスをメンテナンス中にする場合に、どのURLにアクセスしても「メインテナンス中です」の画面を出す正しいやり方を、人間にも検索エンジンにも適切にする作法を主眼に解説します。 この週末の土曜深夜～日曜早朝にかけて、データセンターの設備メインテナンスのため、Web担を含むインプレスグループのほとんどのWebサイトが、どのURLにアクセスしても「メンテ中です」という表示になっていました。 なのですが、その実装がちょっと気になったので、「正しいメンテナンス画面の出し方」を説明してみます。 ※2010-01-16 Retry-Afterを指定するHeaderの指定を修正しました（コメント参照） ※2009-06-17 RewriteCondから [NC] 条件を削除しました（コメント参照） ※2009-06-16 Retry-Afterの記述をGMTに変更しました（コメント参
Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする（変更点を日付と一緒にメモしていく）XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり／なしの統一を指定するサイトリンクの表示をチェックして調整（以降随時）Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste
建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト
前回の記事では、実際の建築プロジェクトにおいて、建築家が建築現場の指揮をとったという実例を紹介しました。今回は設計寄りの話題に移して、プロジェクトだけではなくWebの設計面においても建築分野から学べる考え方があるというお話をしたいと思います。 Webサイトは変化し続けるWebサイトは構築されてから情報が追加されたり、修正されたりしていきます。 これは情報を扱うメディアとしては当たり前のことで、たとえば、雑誌などでも創刊号でつくられたコンセプトを、その後発行する各号でより磨きをかけたり、軌道修正させたりします。 しかしながら、この「変化」は、ただやみくもに変えていけばいいのではなく、その影響範囲や必要性を検討しながら行わなければなりません。今回は、この「変化するWebサイト」についてのありかたを、情報アーキテクチャの観点から考えてみます。 こういった「変化」をWebの設計にどういった形でおり
![建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab17de853b8c29cab6194a39392ba38d04eb0dd/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fweb_project%2Fweb_project_icon.jpg%3Fitok%3DqL-1gvO5){kind=icon}
Webサイト設計にインフォメーションアーキテクトは必要か | Web担当者Forum
僕は、普段はインフォメーションアーキテクトとして情報アーキテクチャ設計やユーザー経験デザインのプロジェクトに関わったり、プロデューサーとしてプロジェクトを統括する立場に立ったりしています。このコラムでは、僕自身の経験や情報アーキテクチャ分野での議論から、主にWebプロジェクト一般に関わるような課題や考え方を紹介していきたいと思います。 まず、第１回のテーマとしては、僕が代表を務める株式会社コンセントの体制を例にしながら、「情報アーキテクチャ」という考え方がどういうものなのかを紹介します。 そもそも情報アーキテクチャとは何か情報アーキテクチャは、簡単に言ってしまえば情報のつなぎ方のデザインです（図1）。世の中には、平面上のデザイン（グラフィックデザイン）、操作画面のデザイン（GUIデザイン）、主に製品の形のデザイン（プロダクトデザイン）など、さまざまなデザインが存在しますが、情報アーキテクチ
Dropbox徹底解剖 - 一度使ったら手放せなくなる! オンラインストレージサービスの本命 | Web担当者Forum
Dropboxというオンラインストレージサービスを知っていますか? リモートワークが主流となった昨今、仕事に欠かすことのできないファイル同期・バックアップシステムであるドロップボックス。今回は、そのインストールの方法から「リビジョン」「まとめてダウンロード」「パブリックフォルダ」などの便利機能、削除したファイルを戻す方法まで、分かりやすく解説します。2GBまで無料で使える便利ツール、徹底解剖! クローズドβの段階から一部で話題を呼んでいたオンラインストレージサービス「Dropbox」がいよいよ正式公開された。笑っちゃうくらいの便利さに、手放せなくなる人が続出しているこのサービスを徹底的に紹介する。 DropboxとはDropbox（ドロップボックス）とは、米Dropbox, Inc.が運営するオンラインストレージサービスだ。サインアップすればだれでも無料で2GBのディスクスペースを利用でき
グラフ作成やデータ可視化を楽に美しくできる便利なサービス22個まとめ | Web担当者Forum
このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合商品がひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、「グラフ作成・データ可視化」サービスだ。 売り上げの推移、業界におけるシェア、自社製品の出荷数内訳などなど…。「顧客の説得のため、ウェブサイトでもグラフ要素を掲載したい」といったケースは増えている。大手企業では、PHPを使いデータベースと連動させて動的に最新グラフを表示させる、といった仕組みを用意できる場合もあるが、たいていは「エクセルで作成したグラフを画像として貼り付け」といった、手作業感あふれるものだった。 だが、昨年末にGoogle Chart APIが登場して以降、さまざまなサービスや独自APIが増加し、選択肢がグッと増えてきた。無料で利用できる
著名ソーシャルメディアが使っているアルゴリズムを大公開！ | Moz - SEOとインバウンドマーケティングの実践情報
“アルゴリズム”は、もっとも非人間的なものの代表だともいえる。ソーシャルメディアにとって、そのアルゴリズムが不可欠だというのは、実に皮肉めいている。 僕はこの間、グーグルがどうやってユーザーデータを集めているかについて書いた記事を掲載した（前編、後編）。今回は、著名なソーシャルメディアサイトが、ユーザーデータを活用する上でどのようにアルゴリズムを用いているのか、白日の下にさらそう。 ソーシャルメディアを成り立たせているのは人間の力だが、ユーザーが入力したデータを利用できる状態にする仕組みは、アルゴリズムによって作られている。現在活動している無数のソーシャルメディアサイトで実証済みのことだが、ユーザーの関与とアルゴリズムによる処理ルールの上手いバランスを見出すことは、とても難しくなりがちだ。これから紹介するアルゴリズムは、悪意のないユーザーと結びついて初めてうまくいくものだ。 人気ソーシャル
日本語向けfonts.css登場？ 無料で使えるJSライブラリYUIの基礎 | Web担当者Forum
去る8月10日、銀座のアップルストアにて「CSS Nite Vol.20」が開催された。 テーマは米ヤフーが無償で提供しているJavaScriptとCSSのライブラリ「Yahoo User Interface Library」。「YUI」の名で知られる、このライブラリに関して、米ヤフーのYUIチームエンジニアリングマネジャーであるエリック ミラグリア氏が来日して講演した。 編集部では、独自に日本語向けのYUI CSSに関する情報も入手したので、イベントの様子と併せてレポートしよう。 結論から言うと、YUIライブラリは非常によく作り込まれているので、どんなウェブサイト開発にも利用できる便利なもので、ぜひ使ってみてほしい。無償で利用できるうえに、利用条件としても、再配布時に著作権表示をするだけいい「BSDライセンス」で提供されているので、商用サイトで使う場合でも、ソースコードを公開する義務が生
ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
Web担編集部の安田です。Web担のはてブ件数1万件超え（）を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」（IEの場合）または「このリンクをブックマーク」（Firefoxの場合）してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか？」とのセキュリティ警告が出ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
秀丸エディタへのインストール | Zen Coding 2-2 | HTML+CSSコーディングが10倍速くなるZen Coding
HTMLのリンク（タグ）について改めて知っておきたい基本 | Moz - SEOとインバウンドマーケティングの実践情報
ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例 | 初代編集長ブログ―安田英久
企業で使えるオープンソースCMS一挙12種類解説（機能やインストール/管理の難易度評価付き） | Web担当者Forum
一歩進んだ情報発信に効果的なRSS配信・管理ツール | Webワーカー向け便利サービス