MWC 2014で、Firefox OS搭載スマートフォンが発表

firefox

Firefox OSとは

2011年、Mozilla Corporationのアンドレアス・ガルが「オープンウェブのためのスタンドアローンオペレーティングシステムの完成を目標として努力する」と発表。

初のFirefox OS搭載スマートフォンは2013年6月にを発売され、2014年アメリカや日本の発売予定となっていた。

メンテナンスも可能なcssファイルの最適化・軽量化ならこの方法

ウェブサイトの表示は高速であればあるほどユーザーの離脱率は低くなりUX(ユーザーエクスペリエンス)も向上する。
表示速度もサイト評価の対象となるとGoogleもコメントしているように、サイトの高速化は急務といえる。

大きな変更を必要としない高速化として、スタイルシートの最適化、圧縮、軽量化は効果的な方法。

検索すると様々なcss圧縮のウェブサービスが見つかるが、難読化がメインだったり、圧縮のレベルを設定できないなど、不便なサイトも多い。
最適化・軽量化の処理をした後も、サイトの更新等でcssの修正が必要となる場合も多いことから「適度な軽量化」が出来るサイトとして、以下のサイトをおススメする。

http://e-optimize.jp/services/csstidy/css_optimiser.php

使い方は簡単。

1. ページ左側にある「CSS Input」のテキストボックスの中にcssファイルの中身をペーストするか、「URLから入力」で最適化・軽量化したいcssファイルのURLを指定する。

2. 実行ボタンを押す。

3. 画面下部に最適化・軽量化されたcssファイルが表示される。

4. 表示されたcssファイルをコピーして保存。

最適化・軽量化されたcssファイルの上部には

入力: 6.901KB, 出力:4.964KB, 圧縮率: 28.1% (-1937 Bytes)

のように表示されるので、どれだけ圧縮、軽量化できたかも確認できる。

また、オプションとしてCode LayoutとOptionsの項目があり、

Code Layoutでは

圧縮率(コードレイアウト)を

最高 (改行なし)
高 (セレクタ1行表記)
標準 (プロパティごと改行)
低 (プロパティをインデント)

からプルダウンで選択することが出来る。

Optionsでは

CSSの内容を保護する
セレクタをアルファベット順で整列(注意)
プロパティをアルファベット順で整列
セレクタの再編成
ショートハンドCSSの最適化
colorの値を簡略化する
font-weightを数値にする
セレクタを小文字にする
プロパティの文字:
変更なし   小文字   大文字
不要なバックスラッシュを削除
最後のプロパティには ; をつけない
規格外のプロパティは削除
タイムスタンプを追加
最適化の結果を保存する

からチェックボックスで有効にする項目が指定出来る。

今後の修正を必要としないcssファイルの場合は圧縮率を「最高」にしてもいいが、修正や追加などのメンテナンスが必要なcssファイルの場合は

標準 (プロパティごと改行)

がおススメ。
また、Optionsは以下の

colorの値を簡略化する
font-weightを数値にする
不要なバックスラッシュを削除

にチェックのままで良いだろう。

なお、最適化のためにcssファイル内のコードの順序等も変更されるから、必ず元のcssファイルは保存しておき、表示に問題が無いことを確認することが大切。

Jetpackの機能のひとつ「共有」のラベルを消してアイコンを左揃えにする方法

WordPressプラグインJetpackの機能のひとつ「共有」は、その名の通りコンテンツを Facebook、Twitter などで簡単に共有できるパワフルなツールであり、簡単な設定と分かりやすいドラッグ&ドロップでソーシャルボタンを自由に並べることが出来る。

ただし、スタイルシートとして「共有ラベル」に指定したテキストで折り返すようにページレイアウトされるため、左側にスペースが空いてしまうケースが多い。
「共有ラベル」の文字を消すだけなら「共有ラベル」の欄を空白にするだけで<h3>のタグも出力されなくなるが、横並びのボタンの左側にスペースができてしまう。

原因は、以下の場所にあるスタイルシート

/wp-content/plugins/jetpack/modules/sharedaddy/sharing.css

上記ファイル内にある

div.sharedaddy .sd-content {
width: 82.125%; /* 530px / 640px */
float: right;
margin: -2px 0 0 0;
}

で左から並ぶソーシャルボタンのブロック自体をfloatで右揃えにしている。

「共有ラベル」を削除してソーシャルボタンを左から無駄無く並べるには、呼び出すページのスタイルシートに以下の表記を加える。

div.sharedaddy .sd-content {
width: auto;
float: none;
}

内容は、コンテンツ幅の82.125%にしているwidth:を初期値に戻し、float: rightを無しにしている。

これで左端から綺麗にアイコンが並ぶ。

なお、ソーシャルボタンの上に引かれる線を消したい時は

div.sharedaddy div.sd-block {
border-top:none;
}

新しいAdsenseの非同期コード、adsbygoogle.jsは1つにまとめられる?

googleも推奨している新しいAdsenseは非同期になり表示が早くなるという利点もある。

非同期広告コードの例

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Adsenseはページに3個まで設定可能だが、各非同期コードに含まれるadsbygoogle.jsは1つで良いのだろうか、それともそれぞれの広告に付ける必要があるのか。

この疑問にはAdSenseのヘルプページ「よくある質問」で答えられている。
https://support.google.com/adsense/answer/3221666?hl=ja

ページ上に複数の広告コードがある場合、各広告ユニットに

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

を含める必要がありますか?

いいえ、その必要はありません。adsbygoogle.js は 1 回だけ読み込まれます。

ということで、adsbygoogle.jsは1つにまとめられる。

ウェブサイトの表示速度向上に役立つ画像圧縮サービスならここ

ピクチャ 1

ウェブサイトの表示速度はユーザーの満足度に大きな影響を及ぼす。
Googleは、読み込み速度0.5秒遅くなると検索数が20%減少するというデータ、amazonは読み込みが0.1秒遅くなると売上が1%減少するというデータをそれぞれ出しており、Googleは表示速度の遅いサイトは検索の順位にとってマイナス評価となることをコメントしている。

そんな中で、画像のサイズを減らすことは簡単な表示速度向上の対策方法といえるだろう。

SEOにも繋がるウェブサイトの表示速度向上に役立つ画像圧縮ウェブサービスを提供しているサイトを紹介。

Compress PNG Images Online
http://compresspng.com/

方法は簡単。

ピクチャ 4

1. SELECT FILESをクリックして手元にあるファイルを選択
2. UPLOAD QUEUEをクリックしてファイルをアップロード
3. 元画像と圧縮後のファイルのプレビューが表示されるから、右にあるスライダーを動かし、画質を確認しながら最適な圧縮率を選択する
+ボタンで画像を拡大して、気になる部分を確認するのがポイント
4. COMPRESSをクリックすると圧縮されたファイルがダウンロードされる

ダウンロードファイルには元画像名に_minが付いているが、HTMLを修正するのが面倒なら、元画像は_org等にリネームして、元画像名で置き換えてしまうといい。
ただし、同名の場合しばらくブラウザがキャッシュを読むこともある。

WordPressのプラグインJetpackが挿入するオープングラフ(OpenGraph)タグを削除する方法

WordPressのプラグインJetpackは多機能で、プラグインを有効にしておくだけで自動的に記事のオープングラフ(OpenGraph)タグを挿入してくれる。
単体で使用している分には構わないが、例えばソーシャルボタンを設置できるプラグインTweet, Like, Plusoneを一緒に使っていたりすると、Tweet, Like, Plusoneもオープングラフタグを自動挿入する機能があるため、オープングラフのタグが複数入ってしまうことになる。

Jetpackのオープングラフタグの自動挿入を停止させるには、以下の方法が簡単。

functions.php内に以下のコードを追加

remove_action('wp_head','jetpack_og_tags');

これでJetpackはタグの挿入をしなくなる。

参考:
http://wordpress.org/support/topic/plugin-jetpack-cant-disable-opengraph

WordPressのバージョンを調べる(探る)4つの方法

1. ソースファイルを見る

ダッシュボード(管理ページ)に入れない、FTPも使えない場合はこの方法。

ブラウザで対象のサイトを開き、ソースファイルのヘッダー部分を見るとバージョンが書いてある。

<meta name="generator" content="WordPress 3.8.1" />

簡単だがセキュリティ強化の例として、このメタタグを消すのがいろいろなサイトで公開されているので、このタグが無い可能性もある。

2. feedのソースファイルを見る

上記対策をしていても気付いていないことが多いのがここ。

ブラウザで対象のサイトのfeedを開く。
feedのURLはメインページのソースファイルのヘッダー部分に書かれている。

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://hogehoge.com/feed/" />

面倒なら、とりあえず、サイトのホーム/feed/を開いてみるといい。

http://hogehoge.com/feed/

feedが表示されたら、そのページのソースを見る。

<generator>http://wordpress.org/?v=3.8.1</generator>

上記のようにgeneratorとしてバージョンが書き出されていることが多い。

3. ダッシュボードで確認する

ダッシュボード(管理ページ)に入れるなら簡単。
ダッシュボードの「現在の状況」に表示されている。
もし「現在の状況」のブロックがない場合は右上にある「表示オプション」をクリックし、「現在の状況」にチェックを入れると表示される。

「ダッシュボード右下に書いてある」と紹介しているサイトをよく見掛けるが、間違い。
使っているのが最新版で無い場合は「バージョン 3.8.1 を入手」のように、最新版のバージョンが表示されている。

4. version.phpを見る

ダッシュボード(管理ページ)に入れないが、FTPやファイルマネージャーにはアクセス出来る場合はこの方法。

wp-includesフォルダ内にある「version.php」をダウンロードするか、ファイルマネージャーで開く。

上の方に
$wp_version = ‘3.8.1’;

と、バージョンが書いてある。

jQuery Mobileの最新版 jQuery Mobile 1.4の主な変更点は

スクリーンショット 2014-02-10 14.17.21

jQuery Mobile の最新版 jQuery Mobile 1.4が正式版となりました。

http://blog.jquerymobile.com/2013/12/23/jquery-mobile-1-4-0-released/

主な変更点としては、1.4アルファ版でアナウンスされていたものが実施されている。

いままでのjQuery MobileではHTMLに多数のDIVタグなどが自動的に追加されていたが、性能向上のため1.4ではDIVタグの追加が抑えられる

SVG化によりRetinaでもなめらかなアイコン表示
http://demos.jquerymobile.com/1.4.0/icons/

jQuery Mobile 1.4.0 では従来のテーマが存在せず、デフォルトのテーマ(light、dark)がフラットデザインに
http://demos.jquerymobile.com/1.4.0/theme-default/

Googleのトップページにプライバシー法違反の告示

スクリーンショット 2014-02-10 12.35.04

Googleが2012年3月に実施したプライバシーポリシー変更がフランスのプライバシー保護法に違反してるとして下された判決により、15万ユーロの罰金とともに、48時間Google検索のトップページ告知することとなった。

https://www.google.fr