カテゴリー: Web

cssやらweb関係を大してわかりもしないのに書いてますよ。

PhpStorm (WebStorm とかでもいいよ) の File Watcher で SCSS sourcemap を出力する

sass が 3.3 になって Source Maps に対応しましたね（以降 scss 表記。

Source Maps は css コンパイルの際に元の scss ファイル何行目に定義されてたか、という情報が JSON 形式のファイルで出力できるってやつです。

普段使っている IDE でもできるようにしたのでメモ（WebStorm でも共通です。

PhpStorm を起動してプロジェクトを開く

もちろん scss 3.3 を使えることが前提。

サンプルとして scss, css だけのプロジェクトを作成して進めます。

scss, css ディレクトリ、 style.scss を作成。

scss 形式の File Watcher を追加

PhpStorm は File Watcher プラグインがあり、これによって保存・更新時に自動コンパイルが走ります。

メニューバーから File > Settings > File Watcher と進む。

右上 + アイコンから scss を選択し、新しいウォッチャを作成、ひとまず OK に。

File Watcher + → scss

New Watcher

このデフォルトのままだと、scss ファイルと同じ所に出力されるようになってます。

もちろん Source Maps は出ません。

Watcher を編集して css の出力先、 Source Maps 出力を設定

というわけで、Watcher を編集します。

設定の Wather 画面に戻り、さっき作った scss Watcher をコピー

Wathcer をコピー

コピーされた scss Watcher

コピーして編集します。

変更する項目	変更前	変更後 (色つきが変更文字列)
Name:	SCSS Copy	SCSS Source Maps
Argument:	–no-cache –update $FileName$:$FileNameWithoutExtension$.css	–no-cache –update –sourcemap $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh:	$FileNameWithoutExtension$.css	$FileParentDir$/css/$FileNameWithoutExtension$.css

出力先フォルダは直書きで css としました。

編集して OK を押下後、デフォルトとして作ったコピー元の SCSS Watcher のチェックを外す。

SCSS Source Maps Watcher

SCSS Watcher はチェックを外す

これで SCSS Source Maps の出力準備ができました。

SCSS Source Maps の出力を試す

設定が終わったので、scss ファイルを更新してちゃんと出力されるか試します。

scss compile css 出力

scss compile css.maps 出力

いけてますね。

ブラウザで確認するとこんな感じ。

Firefox 29 開発ツール sourcemap 確認

chrome 34 開発ツール sourcemap 確認

はかどりそうですね！

設定が面倒な方へ

今回設定した scss Source Maps の Watcher 設定をエクスポートしました。

File Wathers 画面からインポートしてお使いください。

※ぼくの環境用なんで scss 実行ファイル (program: の欄) パスは適宜置き換えてください。

2014/03/10

ユーザー属性とインタレストカテゴリに関するレポート、Google Analytics で年齢・性別・興味を取得する方法
昨年、2013年の10月に大幅なアップデートがあった Analytics。

ユニバーサルアナリティクスという新しいものができ、今までよりも詳細にアクセスを解析できるようになりました。

ブログではずっと放置してたんですが、このたび導入したんで手順・方法を今さら（きっとまだやってない方がいるとみた）。

ぼくは Google Analytics のコードをちょっと書き変えるだけでレポートを確認できるようになりました。

ユニバーサルアナリティクスとは

Google さんのヘルプページ、ユニバーサルアナリティクスについてを見ると全て説明されています。

デメリットが見当たりません。

ユニバーサルアナリティクスを導入する方法

ユーザー属性とインタレストカテゴリに関するレポートを取得するためにはまず、ユニバーサルアナリティクスを導入しなければいけません。

導入していないなら Google さんのヘルプページ、ユニバーサルアナリティクスを導入する（概要）を確認して導入しましょう。

導入済みだったためスクショ、ないです。

Google Analytics にアクセスしてみる

ユニバーサルアナリティクスを導入してアクセスすると以前とは違った見た目になっているはず。

で、左サイドメニューのユーザー > ユーザーの分布 > サマリーをクリックしてみると、

ユーザー属性とインタレストカテゴリに関するレポート

トラッキングコードの修正をしてから確認ボタンを押せ、と書かれています。

修正しましょう。

トラッキングコードの修正

修正の手順は Google ヘルプアナリティクストラッキングコードを更新してディスプレイ広告に対応するの通りに。

引用すると、（コードは見やすく整形しています）
ユニバーサルアナリティクスをディスプレイ広告に対応させるには、次の例のように、既存のトラッキングコードのコマンド ‘create’ と ‘send’ の間に新しい行（太字）を挿入します。
```
<script>
	(function (i, s, o, g, r, a, m) {
		i['GoogleAnalyticsObject'] = r;
		i[r] = i[r] || function () {
			(i[r].q = i[r].q || []).push(arguments)
		}, i[r].l = 1 * new Date();
		a = s.createElement(o),
				m = s.getElementsByTagName(o)[0];
		a.async = 1;
		a.src = g;
		m.parentNode.insertBefore(a, m)
	})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
	ga('create', 'UA-XXXXXX-XX', 'example.com');
	ga('require', 'displayfeatures');
	ga('send', 'pageview');
</script>
```
一行追加するだけでよし。

追加してさきほどの Analyrics 画面に戻り、”トラッキングコードを確認” をクリック。

画面が遷移して再度確認をクリック。

トラッキングコードを確認 – Google Analytics

トラッキングコードが正しく設置されていると、ユーザー属性レポートが有効になります。

Google Analytics ユーザー属性が有効化される

有効化されると、ユーザーの分布からサマリー・年齢・性別が見られるように。

ユーザーの分布- サマリー – Google Analytics

ユーザーの分布- 年齢 – Google Analytics

ユーザーの分布- 性別 – Google Analytics

やったね！
2014/03/07
Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法
アイコンフォント、便利ですよねほんと。もう使わずにはいられない体になってます。

近頃はソーシャルアイコンも充実の一途を辿り。

しかしながら、ソーシャルボタンでもよく使われるはてなブックマークは日本人が対象。

アイコンフォントに含まれているわけもなく、自力でどうにかしてみよう！ということで。

考え得れた手段
- 自分で作って既存のものへ自分でマージする
- 自分で作って既存のものへマージしてもらう
- 全部自分で作る
難易度の低い順番に並べましたがそもそもの難易度が高い…。

作るしかないかーとはてブロゴを眺めていて、閃きました。

はてブのロゴって、文字。

文字ですよね。

はてブのロゴを眺めているさま

何が言いたいかってつまるところ、普通のフォントで代用できるんじゃないの？ということ。

現実的かつ簡単ぽい。

Windows と Mac 共通の欧文フォントをロゴと比べてみる

Windows と Mac 共通の欧文ではてブアイコンっぽくするのが一番作業コストが低そう。

共通な欧文フォントは
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
こんな感じ？ここから似てるっぽいのを見繕う。

Arial 太字

Verdana 太字

Verdana の太字が似てる、遠目で見たら気づきにくいぐらいではある。

と勝手に決めつけ。

文字なら css の疑似要素でなんとかなりますね。

はてブのフォントアイコン風 css を書く！

ぼくが使っているのは Font Awesome なので、Font Awesome に準拠したクラス指定で書きました。

お使いのフォントアイコンに合わせる書き方がいいでしょう。

まず css。簡単。
```
/* Font Awesome hatena bookmark */
.fa-hatena:before {
	content: "B!";
	font-family: Verdana;
	font-weight: bold
}
```
scss の場合は、
```
//
// Font Awesome hatena bookmark
//
.fa-hatena {

	&:before {
		content: "B!";
		font-family: Verdana;
		font-weight: bold;
	}
}
```
こんな感じで書けば Font Awesome の場合、

表示: html: <i class="fa fa-hatena"></i>

表示: html: <i class="fa fa-hatena fa-2x"></i>

表示: html: <i class="fa fa-hatena fa-3x"></i>

使えますね！

まとめ

ブログページ右上のところでもこれを使ってますのでサンプルとしてわかりやすいかと。

シュッと使えてギリギリ気にならない見た目になるのでこれは使えると確信した瞬間でした。
2014/02/28
AndroidHTML ブックマークレットを更新・改善して version 3 にしたのでお知らせ。
※2017年3月15日(水)、Dropbox のパブリックフォルダが廃止されたためブックマークレットが動かなくなりました。URL を差し替えたリンクに直しましたので、再登録お願いいたします。

ブックマークレット前回までのくだりは過去記事を参照ください。

ちょっと出力を調整しました。

AndroidHTML 前回からの変更点
- Play Store アイコンつけた
- 購入・ログイン如何に関わらず価格等とれるように
- 出力に改行があると、CMS によっては p タグが入るので出力の改行をなくした
- 構造化データに対応（後述
です。

構造化データとは

HTML マークアップにより、検索エンジンなどがデータ構造をより簡単・詳細に把握できる、ってやつです。

今回使ったのは schema.org モバイルアプリのスキーマ。

Google リッチスニペットで確認すると、

AndroidHTML v2 リッチスニペット結果

バッチリです。

出力サンプル

こんな感じで出ます。

Google検索

制作: Google Inc.

価格: 無料

平均評価: 4.4（合計 588,825 件）

AndroidHTML v3 ブックマークレット登録

ブックマークレットの登録はこのリンク→ AndroidHtml for Play v3 をブックマークバーにドラッグ&ドロップで。

うまくいかない場合は下の文字列をブックマークURLにペーストしてください。
```
javascript:"//hayashikejinan.com/hob/api/bm/androidHTML_v3.js (arg)".replace(/(\S )\s (\S*)/,function(s,url,arg){s=document.createElement("script");s.charset="utf-8";s.src=url "?s=" encodeURIComponent(arg);document.body.appendChild(s)});void(0);
```
今後 URL は変えずこのままいきます。
2014/01/29
サーバーをさくらのレンタルサーバーからXサーバーに引っ越したので理由～全手順まとめ
今月あたまに引っ越しました。

いろいろ調べたり、サーバー契約者さんに直接聞いたりし、今の自分に最適なサーバーを選択したつもりです。

理由

引っ越す決意を固めた理由
- 動かすプログラムが増えてサーバーのメモリが足りなくなった
- そもそものサーバー応答速度に不満を覚え始めていた
というところ。

具体的な症状としては
- Premature end of script headers エラーが頻発
- それに伴い 500 Internal Server Error も頻発
なんとかだましだまし軽量化して使ってはいたものの、その無駄な時間を違うことに使おうと。

候補

予算はまぁそれなりとして、
- エックスサーバー
- さくら VPS
の2点を候補に。

やっぱさくらVPSだよねーと思いながら評判など調べていると、こういう記事を見つけ

 さくらのVPSは突然制限かけられて激重になるから要注意 | GUiLZ.ORG

次に困ったら Amazon S3 にするか…ということでエックスサーバーに。

Xサーバーの申し込み

エックスサーバー申し込みページよりしゅっと済ます。（割愛

エックスサーバー他社レンタルサーバーからの乗り換え方法

エックスサーバー規約に同意して申し込みへ

エックスサーバー新規サーバーproposal

エックスサーバーサーバーID指定

エックスサーバー申し込み完了

エックスサーバー確認メール着弾

以降元の WordPress バックアップ取得

バックアップは2つ
- 本体やテーマ、画像などのファイル群
- データベース
が必要です、作業に慣れていないと若干手間取ると思います。

WordPress ディレクトリ全ファイルをダウンロード

引っ越し前のさくらサーバーでは ssh が使えましたので、
```
zip -r [zipファイル名].zip [zipしたいディレクトリ]
```
zip 圧縮してからダウンロード。

FTP でディレクトリごとダウンロードしてもいいです。（時間かかります

WordPress のデータベースをエクスポート

さくらのレンタルサーバー、phpMyAdmin にログインしてエクスポート。

エクスポート選択

すべてチェックし、エクスポート

エクスポート実行

データ移行

上でバックアップしたファイル群・DBデータを元に、

エックスサーバーの WordPressの移転についての通りやればできます。

エックスサーバーの設定

サーバーの設定をいじって、
- FTP アカウント作成
- SSH 接続設定
- php バージョン変更（5.5に
- php.ini のエンコードを UTF-8
- FastCGI 化
など滞りなくすませ。

FastCGI 化すると opcache が使える

opcache は中間コードを最適化するやつです。

slideshare に詳しい説明があったので説明は割愛。

Zend OPcacheの速さの秘密を探る from Yoshio Hanawa

わかりやすいですねー。

エックスサーバー opcache デフォルト値

ということで、opcache のデフォルト値を見てみる。
```
opcache.blacklist_filename = no value
opcache.consistency_checks = 0
opcache.dups_fix = Off
opcache.enable = On
opcache.enable_cli = Off
opcache.enable_file_override = Off
opcache.error_log = no value
opcache.fast_shutdown = 0
opcache.force_restart_timeout = 180
opcache.inherited_hack = On
opcache.interned_strings_buffer = 4
opcache.load_comments = 1
opcache.log_verbosity_level = 1
opcache.max_accelerated_files = 2000
opcache.max_file_size = 0
opcache.max_wasted_percentage = 5
opcache.memory_consumption = 64
opcache.optimization_level = 0xFFFFFFFF
opcache.preferred_memory_model = no value
opcache.protect_memory = 0
opcache.revalidate_freq = 2
opcache.revalidate_path = Off
opcache.save_comments = 1
opcache.use_cwd = On
opcache.validate_timestamps = On
```
opcache の高速化チューニングは公式の説明によると、php.ini の値をこうしろ
```
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1

// CMS や フレームワークによってこれを書くとダメな場合がある

opcache.save_comments=0
opcache.enable_file_override=1
```
ということなのでその通りに。

opcache.revalidate_freq を60にすると、WordPress のプラグイン設定など、opcache の古いキャッシュを使ってしまうため表面的には設定が反映されない（キャッシュ生成後1分までは設定前のキャッシュを読んでる）ため、よくわかんないひとは opcache.revalidate_freq を 1～3 あたりにするのが無難か。

opcache.save_comments は php コメントによって処理を振り分ける CMS を使ってる場合、1 にしないといけない。

WordPress はコメントが処理に関係しないため大丈夫。

ネームサーバー書き変え

ドメインは何故かさくらで取得しているので、さくらのネームサーバー書き変え。

書き変え方法はさくらのヘルプ参照。

サーバーを乗り換えた結果

快適です。

そもそも WordPress を5個+マルチサイト+他ので動かしていたのが悪かったと。

ﾎﾎまとめ

移行自体は経験があれば半日、なければ1日程度で済みます。

誤算だったのは、エックスサーバーがサブドメインで WordPress のマルチサイトを動かせなかったことぐらい。

乗り換え後、日数が経ってしまったためところどころ文章甘いなーというのが反省。

エックスサーバー、いいよ。
2014/01/27
strip_tags、html タグを取り除く PHP の関数
当たり前のことでも書いていくといいことがあるはずなので備忘録。

php で html タグや php タグを削除する便利な関数。

strip_tags

公式のマニュアルはこちら、簡単な関数。

PHP: strip_tags – Manual

string strip_tags ( string $str [, string $allowable_tags ] )

パラメータは2つ、1つめは必須で、2つめは許可するタグを指定できるオプションの引数。

使ってみる

実際に使って確認。

まずは file_get_contents で http://example.com を表示するだけのサンプル。
```
<?php
$html = file_get_contents( 'http://example.com/' );
echo $html;
?>
```
http://example.com のソースはこんな。
```
<!doctype html>
<html>
<head>
    <title>Example Domain</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 50px;
        background-color: #fff;
        border-radius: 1em;
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        body {
            background-color: #fff;
        }
        div {
            width: auto;
            margin: 0 auto;
            border-radius: 0;
            padding: 1em;
        }
    }
    </style>    
</head>

<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is established to be used for illustrative examples in documents. You may use this
    domain in examples without prior coordination or asking for permission.</p>
    <p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
```
これを実行すると、http://example.com のソースを引っ張ってくるのでそのまま表示される。

example.com と同じのがそのまま表示される

strip_tags してみる

まずは1つめの引数だけ使って。
```
<?php
$html = file_get_contents( 'http://example.com/' );
echo strip_tags( $html );
?>
```
これで全てのタグが除去されて、こうなる。

strip_tags によりタグというタグが取り除かれる

インラインスタイルの <style></style> 内は残る。

2つめの引数で除外してみる

<style> タグを指定。
```
<?php
$html = file_get_contents( 'http://example.com/' );
echo strip_tags( $html, '<style>' );
?>
```
ちゃんと <style> だけ残った。

除外できた。複数指定も可。

注意点

ドキュメントに書いてあるとおり、

strip_tags() は HTML の検証を行わないため、不完全または壊れたタグにより予想以上に多くのテキスト/データが削除される可能性があります。

乱れた HTML だと実行結果が芳しくないかもしれないので注意。

おわり。
2013/12/19
Feedly beta が Feedly公式ブログでアナウンスされています。

Google Reader が終了してからというものずっと使い、追いかけ続けている Feedly。

2013/12/08 付けの公式ブログにて、β版の提供がアナウンスされました。

Announcing the feedly beta channel | Building Feedly

Feedly beta を使うには

2013/12/09 20:00現在、何も変わりはありません、 http://feedly.com/beta にアクセスすればいいとのことです。

今週中 (2013/12/15 ぐらいかな？) には反映されるとのこと。

Feedly の Google+ コミュニティもできたらしく

あんまり熱心にやっている人と遭遇しませんが、慣れると一番楽しいという噂の Google+ です。

Android, iPhone 版のβも！

Web 版の βがうまくいき次第、Android, iPhone のβ版に着手するようです。

ついでに通常版の各リンクを載せておきます。

Feedly News Reader. Blogs. RSS

制作: Feedly Team

価格: 無料

平均評価: 4.5（合計 136,548 件）

Feedly News Reader. Blogs, RSS and Youtube.
DevHD
価格： 0円

posted with sticky on 2013.12.9

まとめ

まとめも何も、ニュース的な更新なのでたいしてまとまりがないですけども、

RSSリーダーとしては今後も Feedly を推していきたいぼくです。

2013/12/09
AndroidHTML ブックマークレットが動かなかったんで直してみたよ。
2014/01/29 更新しました→新しい記事へ

android アプリをブログで紹介したい、って時に使っていた AndroidHTML ブックマークレットを久しぶりに使ってみたものの動かず。

どうやら Android マーケットから Playストアに変わったため使えなくなった模様。

幸いにも制作者の方が公開してくだすってるのでこれはひとつ修正しましょうということで。

Play Store 向けに修正しました

Hatena let で公開されていたので fork して修正。

元の AndroidHTML からの変更点は
- Playストア対応
- 画像に alt を追加
- chrome で閲覧時に画像が webp 形式になるのを png にする
- 出力を調整
- 無料の場合 undefined になってたのとかを修正
ぐらいです。

動作確認してみたところ

Playストアで使ってみますと

このページには認証されていないソースからのスクリプトが含まれています

Playストアは https なんで http な Hatena let のブックマークレットだと安全じゃないと言われてしまいます。

“安全でないスクリプトを読み込む” を押せばまぁいけるんですが、毎回となると面倒。

https な Dropbox にブックマークレットを据えた

これで問題なく使えるように。

~~ブックマークレットの登録はこれ→ AndroidHtml for Play~~

ブックマークレットの使い方は、Playストアのアプリ単独ページに訪れブックマークレットをクリックでOKです。

ブックマークレットを使うと

こんな感じで出力されます。

Google検索

制作: Google Inc.

価格: 無料

平均評価: 4.3（合計 436,275 件）

インストール済みの有料アプリの場合価格が取得できないので、シークレットウインドウ開くなり、ログアウトするなりしましょう。

まとめ

元々制作された nkunijp さん pantherlamd0219 さんにスペシャルサンクスです、それ以外ありません。

とりあえずこれで android アプリの紹介が滞りなくできると思います。
2013/12/03