2014年5月の、これだけは押さえておきたいWeb関連の動き

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。

Google

Google、Windows版 Chromeの拡張機能をウェブストア経由に限定。ストア外入手は導入済みでも無効化 – Engadget Japanese

拡張機能の開発者は、今後も開発のためにローカルでのインストール可能なほか、インラインインストール機能を利用して自分のサイトで配信もできます。

ということで、Chrome の拡張を一般に配布するためには Chrome ウェブストアに登録する必要があるようです。

自分のサイトで拡張を配布するためのインラインインストール方法は、以下のページに書いてあります。

参考: Using Inline Installation – Google Chrome

今のところウェブストア経由でしかインストールできないのはWindows版 Chrome のみですが、この影響か、ウェブストアからの再インストールを求めたり、有料登録を求める拡張なども出ているようです。

Google ウェブマスター向け公式ブログ: ウェブページをより深く理解するようになりました

Google は現在、最新のウェブ ブラウザに近いコンテンツの表示、外部リソースの追加、JavaScript の実行、CSS の適用を実現しています。

ということで、JavaScript でコンテンツを表示している場合でも適切に検索できるようになりつつあるようです。

例えば、下北沢オープンソースCafe のサイトは YinYang という JavaScript テンプレートフレームワークを使用しているため、HTML にはほぼ何も書かれていません。

しかし、Google 検索結果では HTML に書かれていないテキストが表示されていることが分かります。

下北沢オープンソースCafe 検索結果

ユニバーサルアナリティクス完全移行マニュアル

ユニバーサルアナリティクスは「クロスドメイントラッキングの実装が簡単に」「ログインが必要なサイトではデバイスをまたいだユーザー測定が可能に」などのメリットがあります。

デザイン関係

MacBook で Adobe Creative Cloud が動いていたら今すぐ止めろ – ヤルキデナイズド

これは誤解する方が多そうだなーと思っていたのですが、はてなブックマークのコメントを見ているとやはり誤解している方がいらっしゃるようです。

ここでいう「Adobe Creative Cloud」というのは Photoshop CC や Dreamweaver CC のことではなく、Mac のメニューバーに常駐する CC アイコンのアップデートプログラムのことです。

常にというわけではありませんが、時々「Adobe Creative Cloud」プログラムは異常に CPU を使用することがあります。
「Adobe Creative Cloud」プログラムを終了していてもアップデート通知は来ますし、アップデート通知をクリックすればアップデートはできますので、終了させておいても構わないと思います。

Fireworksで作ったデータ(.png)をPhotoshop形式(.psd)に変換する方法 | 株式会社マグネッツ:福岡市博多区のホームページ制作会社

結論としては最初っからPhotoshopで作るべきとなりますね、はい…。

ですよねー…

Macで使える4K液晶が判明!Dellの格安4Kの購入者はやはり勝ち組|Mac

そろそろ、外付けディスプレイを 4K にして、HiDPI(高解像度)表示にしたいと思っているのですが、MacBook Air では4K出力は無理、MacBook Pro 13インチでは出力は可能だけど少々性能的に辛い感じらしく、15インチは重く、Mac Pro(デスクトップ)は高いのでどうしたものかと悩み中です。

ちなみに、ASUS からも28インチで安い4Kディスプレイが発売予定だそうです。

参考: ASUSから28型で8万円を切る4K液晶モニタPB287Q。4K 60Hz対応、応答速度1ms – Engadget Japanese

Code Adventure | Simplify Workflows for Designers

複数のシェイプカラーを管理し、まとめて変更できるようにする Photoshop 拡張パネル(プラグイン)です。

コーポレートカラーやサイトのテーマカラーを管理し、まとめて変更したい場合に便利そうですね。

シンボルフォント — それは、新しい画像形式

高解像度のタブレットでも綺麗に見れるWebサイトを制作する場合、モノトーンのアイコンなどはビットマップ系の画像形式よりSVGなどのベクター系の画像形式にしておいたほうが良いですが、どうせならひとまとめにしておいたほうがページの表示を速くできますし、シンボルフォント(Web fonts)にしておけば古い IE や Android でも見れるので良いですね。

参考: Can I use @font-face Web fonts

IllustratorでWebデザインをはじめよう! 第4回:デザインを作り込もう 画像・配色・テキスト編 | Adobe Pinch In

IllustratorでWebデザインをはじめよう! 第5回:デザインを作り込もう パーツの装飾編 | Adobe Pinch In

画像を SVG などのベクター形式で保存(書き出し)したい場合、Illustrator は非常に便利なアプリケーションです。
現在は Illustrator でWebデザインカンプ制作する方は少ないですが、今後は増えるのではと思っています。

ちなみに、Photoshop CC でもシェイプレイヤーを SVG 形式で書き出すことは可能です。

参考: Photoshop CCの画像アセット機能でSVGを書き出す裏技 | Stocker.jp / diary

Webコーディングスクール 体験レッスン受付中

素材

Prefectly(日本地図のシンボルフォント)

PrefectlyはHTMLとCSSを使って日本地図を簡単に表示できるシンボルフォントで、アメリカの州をシンボルフォントにしたStatelyをベースに作られています。

Prefectory 日本地図

以前、このブログに JavaScriptなしで地域ごとに色が変わる日本地図を作る という記事を書いたことがあり、これをベクターにしたいと思っていたのですが、こういったものが登場してよかったです。

WindowsとIE

「Windows XP搭載PCにもう二度とアップデートはこない」とMicrosoftが再度通告 – GIGAZINE

やはり4月上旬の緊急アップデートは例外で、今後は2度とアップデートは来ないようです。

ASCII.jp:世界のトップシェアはChrome! IE天下の日本は少数派 (1/2)|高橋暁子の「意外と知らない!? 業界ランキング」

世界では Chrome のシェアが 43%、IE は 22% に対し、日本は IE 49% に対し Chrome 23% だそうです。

一般的な PC ユーザーの方がどういった理由で Chrome を使いはじめるか気になるのですが、海外の方は速度重視で、日本の方はイントラサイトの互換性重視 or 他のWebブラウザーを知らないのでしょうか…

プログラミング

ペアプログラミングして気がついた新人プログラマの成長を阻害する悪習 – Qiita

悪い習慣として「エラーメッセージ・ログを読まない」という方はよく見ますね。
エラーメッセージは大抵英語なので読みにくいとか分かりにくいと感じられるのかもしれませんが、エラーメッセージをコピーして Google などで検索したり、Excite 翻訳などを利用して翻訳すればなぜエラーが出ているのかわかると思います。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index