タグ: php

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

ubuntu に lamp をインストールして apache+php+MySQL 環境を作ったメモ
ノートパソコン、Ultrabook を使っているんですが、Windows だとメモリ不足でちょっと重い作業がしづらくなったため OS を ubuntu に移行。

で、Apache, MySQL, PHP をローカルで使えるようにしたメモ。

ubuntu バージョンは 14.04 alpha。

参考にしたサイト

ubuntu コミュニティの通りに。

ApacheMySQLPHP – Community Help Wiki

Lamp を ubuntu にインストール

Windows なら xampp、iOS なら mamp、という感じで Linux には lamp があり。

手順に沿ってコマンドからインストール。
```
sudo apt-get update
sudo apt-get install tasksel
sudo tasksel install lamp-server
```
sudo apt-get install tasksel

パッケージインストール中

MySQL パスワード設定

sudo tasksel install lamp-server

lamp の各バージョン確認

インストールが終わったのでバージョン確認。
```
// apache2
apache2 -v
// php
php -v
// MySQL
mysql -v
```
でそれぞれバージョン確認できます。

lamp 各コンポーネントバージョン

lamp サーバーフォルダ

/var/www が作られています。

localhost での表示はデフォルトで /var/www/html/ を参照する設定に。

/var/www/hthl/

これでローカル環境ができる。

フォルダは root 権限なので、外部に公開しないならユーザー名で権限を振ってもいいかな。

PHP について詳しく知りたいならこれ。

独習PHP 第2版

posted with amazlet at 14.04.13

山田祥寛
翔泳社
売り上げランキング: 19,009

Amazon.co.jpで詳細を見る

MySQL 運用はこれ。

エキスパートのためのMySQL[運用+管理]トラブルシューティングガイド

posted with amazlet at 14.04.13

奥野幹也
技術評論社
売り上げランキング: 20,831

Amazon.co.jpで詳細を見る

を読むといいでしょう。
2014/01/30
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