技術的な話題   

たいとるそのまま。

Composer 使って Packagist から ライブラリを入れられるけど結局何者なんだ、 install と update の違いはなんだ、つーかオートロードってどうなってんねん、などなどがよくわからなかったのでドキュメントとかソースを見た。

Read more »

   技術的な話題   

こんにちは、ごみばこです。

最近になってようやく、ちゃんとしっかり CSS の教科書を読みました(設計の大事さと紹介まで)。そのメモというか、まとめです。CSS 設計マジ大事やなー。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | 谷 拓樹 |本 | 通販 | Amazon

余談ですけど、ここのところブログをちょこちょこ書いているのですが、トップページが遊び要素メインで中身が無いと見なされてか Adwords も Amazon アソシエイトも審査落ちしたので、ごみばこいんからのリンクはノーアフィリエイトです。かなしみ、ビールの一杯くらい稼いだっていいじゃない

CSS設計がなぜ重要か

フロントエンドも作って終わりではない。
web サイトのコンテンツが増えたり、キャンペーンをしたりなど、 web サイトの内容が変わっていくので、それに合わせて各コードのメンテナンスをしていかないといけない。それはもしかしたら誰かに引き継ぐかもしれないし、自分でやるかもしれない。リッチな表現が求められる今の web サイトでは HTML も Javascript も CSS も複雑なものになっていく。

中でも CSS はシンプルに書ける一方でたくさんの記述が必要がゆえ、複雑なことをしようとすると、スパゲッティコードになりやすい。だから設計というルールを設けていく。
プログラミングと同様に CSS も設計をすることで、予測しやすい、再利用しやすい、保守しやすい、拡張しやすい、ものを記述できるようになる。

設計をどうやっていくか

見た目の変更や入れ替えがあるなかで、使いまわすようなものも多くある。その使いまわしのために、要素を部品=モジュール、コンポーネントと考えていく設計が有効になる。
そのコンポーネントとして考えるために、いくつかの実際に活用されている設計方針を紹介していく。

OOCSS

Object-oriented CSS

構造と見た目の分離、コンテナとコンテンツの分離を挙げている。
コンポーネントとしての構造、ブラウザ上での見た目を分離して考えること。ある要素がどこにいるかのコンテナ、ある要素のコンテンツを分離して考えること。

後者は難しいが「場所に依存しないセレクタを書くこと。どこそこの中にある○○、とし定義されるようなものを避けること」と考えるとわかりやすい。

SMACSS

Home - Scalable and Modular Architecture for CSS

OOCSS で言われている分離を実践するためのカテゴリが決められている。

Base :見た目のリセット、標準化
Layout:全体的なレイアウト設定(2カラムなの、3カラムなの、ヘッダー?)
Module:コンポーネント自体
State :コンポーネントの状態
Theme :コンポーネントの見た目違い

もう一つのSMACSSのポイントとして「HTMLとCSSの分離」が挙げられている。

要するに。
SMACSS = OOCSS + OOCSSを使うためのカテゴリ + HTMLとCSSの分離

BEM

BEM — Block Element Modifier

CSSにおける命名規則の提案。OOCSS、SMACSSを考えてのコンポーネントを記述できるよう規則が決められている。

Block
Elementの集合体、ひとつのコンポーネント
命名は自由

Element
コンポーネントに含まれる要素の1つ1つ
命名は Block_Element という形式

Modifier
BlockとElementについて、場合分けが起こるときに使う
命名は Block__Modifier または Block_Element__Modifier という形式

たしかにBEMでは、アンダースコアを付けるように、と言っているがそれはさほど重要ではない。キャメルでもハイフンでもいい。コンポーネントの体に合わせた命名規則を設けることで、シンプルにたくさん書けるCSSへ規律をもたらし、事故を未然に防いだり可読性を上げることが大事。

MCSS

MCSS

SMACSS にレイヤーというルールを足すようなもの。複数のレイヤーを構成することによってCSSを設計する。レイヤーとして縛りを設けることで、CSSプロパティの汚染を防いでいく。

Foundation
プロジェクトの土台、resetcssやnormalize.cssがそれ
最初に読み込まれる

Base
コンポーネント定義
他のレイヤーから拡張変更ができる必要がある
Baseレイヤーコンポーネントは上書きできる

Project
具体的なページを構成する要素、Baseレイヤーコンポーネントの集まり。現実的にはこのレイヤーが厚くなりがちだけど、上書きによって階層が深くならないようにする
Baseレイヤーコンポーネント、Projectレイヤーコンポーネントを上書きできる

Cosmetic
下層レイヤーコンポーネントに含まれないちょっとしたスタイル。ヘルパー、ユーティリティのようなもの、グローバルなModifierなど。
基本的に上書きは出来ない

Context
例外的なレイヤー。すべてを上書きできる。
特定のブラウザ、デバイス、状況によって切り替えるようなもの。PC / スマホ、ログインしてる / してない。
セクションを持たず、各コンポーネントについて書かれるセクションの中で記述される。

レイヤーの分け方に合わせて、CSSを記述するときの基本原則がいくつかある。

  • コンポーネントを1つのセクションにまとめる
  • Modifierを個別クラスにし、単体で利用しない
  • コンポーネントのカスケーディング(上書き)が出来る
  • あるコンポーネントに含まれる別のコンポーネントに適用するスタイル。ただし上層のコンポーネントを上書きしてはいけない。同じ層か、下層のみ上書き可能
  • クラス名を略語にする

FLOCSS

この本の筆者が考えている、全部まぜのいいとこ取り。

ソースファイルのセクションわけ、レイヤー制約、命名制約が盛り込まれている。詳細は Github で!
hiloki/flocss: CSS organization methodology.

ルールこそ多いように見えるが、ルールに乗れると非常に楽(体験談)

ここまで読んで

個人的なちょっとしたやつで Bootstrap を入れた上で、新たに書き足す部分を FLOCSS を意識して作ったところ、非常にわかりやすく、事故もなく、安心安全にできてちょっと感動してました。
…、とはいえ FLOCSS でみんなやろうぜ!というわけではなく。本にも書かれているのですが、色々な考え方があるけど俺達はどうやってやるよ、というのを改めてちゃんと考えないとね、って思いましたとさ。

いじょ。

   技術的な話題   

数式をこねくりまわす知識や技術はないので自分で求められないのですが、平均値って逐次計算できるのかな?を調べたメモ。

x = [...] // 元の数列
z = ...   // 追加したい数

// 平均値
Average(x) = Sum(x) / Count(x)

// 数を追加した平均値
Average(x + z) = Average(x) + ((z - Average(x)) / Count(x))

調べていたらこういう式も。平均に個数をかけて数を足し、そこから新しい個数で割れば、新しい平均だよね、というもの。そりゃそうだわ。

Average(x + z) = (Average(x) * Count(x) + z) / Count(x + z)

どちらにしても個数と平均値だけ持っておけば逐次計算できますね。後者は掛け算するので、個数や平均値が大きすぎると扱えなさそうなので、前者のほうがよさそう。

試しに実装してみるとこういう形。

class MeanStream
{
    private $mean = 0;
    private $dataCount = 0;

    public function __construct() {
    }

    public function add($num) {
        $this->dataCount++;
        $this->mean = $this->mean + (($num - $this->mean) / $this->dataCount);
        return $this;
    }

    public function get() {
        return $this->mean;
    }
}

echo new MeanStream()
    ->add(1)
    ->add(7)
    ->add(8)
    ->add(6)
    ->add(2)
    ->add(5)
    ->add(1)
    ->add(8)
    ->add(9)
    ->add(4)
    ->get();

echo (1+7+8+6+2+5+1+8+9+4) / 10;
// 5.1

あってますねー

 
ちなみに、当然のことながら上記の例だと浮動小数点数を使うので、使う値によっては表現の都合で微妙に数値が変わるのでその点だけ注意ですね。

$values = [];
for($i = 0; $i < 10; $i++) {
    $values[] = mt_rand();
}

$mean = new MeanStream();
foreach ($values as $value) {
    $mean->add($value);
}

echo sprintf('%.30f', array_sum($values) / count($values));
// 995988838.500000000000000000000000000000

echo sprintf('%.30f', $mean->get());
// 995988838.499999880790710449218750000000

PHP じゃない言語で実装するとして、もし Decimal のような、よろしく精度をもってくれる機能があればそれを使ってあげるほうがよさそうです。PHP は言語として標準に Decimal がないのでどうするんだろう、 bcmath とか gmp というのがありそうだけど extension に左右されるなー。まあ composer.json で extension について依存あるよーと記載すればいいのか。
PHP: 数学 - Manual

Packagist みると幾つかありそうなので、このあたりを使ったほうがいいのかなー。

 
と、話がそれてきたあたりでおしまい。ライブラリの話はまた今度。

   技術的な話題   

試したらびっくりしてタイトルが日本語崩壊してますが大丈夫です。どーも、ごみばこです。

一時期 Atom を使ってたけど、もっさり感がどうにもならないのと、簡易的なメモ(新規ファイル作って保存せずメモしておきたい、エディタ再起動しても残っていてほしい)が残せなかったっぽいのもあって、しばらくずっと PhpStorm か SublimeText を使っています。 PHP を書くことが多いから PhpStorm !!! PhpStorm 最高!!!!

いったん PhpStorm は置いておいて。

最近になって、普段使いの PC を新しいものに変更してスペックも上がったし Atom もいろいろバージョンアップしているようだしどうだろうなあ、と思って Atom のプラグインを色々見てたら Jupyter を触れるとかなんとか書いてあるではありませんか!
謎技術だなあと思いつつもエディタ上で Jupyter のように振る舞ってくれるならそれはとっても素敵だなーと思ったので、試してみたの巻。

 

Atom + Jupyter をやるには?

Hydrogen というパッケージを使うと Atom 上で Jupyter かのように一行ずつ実行したり、結果をグラフィカルに表示したりが出来ます。

内部的にはインストールされている Python で Jupyter を起動。 Jupyter が用意しているメッセージプロトコルを利用して nodejs と通信し、その結果を Atom で見えるように整形している、というものです。

参照)nteract/hydrogen: Run code inline in Atom using Jupyter kernels
※ How it works のくだり。

この Hydrogen を Atom にインストールしてやります。
それでは、順番に環境を準備していきましょう。

Read more »

   技術的な話題   

こんにちは、ごみばこです。

MeCab や Kuromoji などで行える形態素解析、すごいですよねー。ただ新しい語が増えたり、なんだりーってしたときに、辞書を更新しないとちょっとだけ直感的ではない分割のされ方になりますよね。まあ、辞書を元に分割の仕方を学習するのでそうなんですが。。
そこに対して mecab-ipadic-neologd という素晴らしいプロジェクトがあって、最近の語もどんどん追加してくれています。

neologd/mecab-ipadic-neologd: Neologism dictionary based on the language resources on the Web for mecab-ipadic

これを使うと Github のサンプルにもかいてありますが「中居正広のミになる図書館」が固有名詞として認識されたりします!(スゴイ)

$ echo "10日放送の「中居正広のミになる図書館」(テレビ朝日系)で、SMAPの中居正広が、篠原信一の過去の勘違いを明かす一幕があった。" | mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd
10日    名詞,固有名詞,一般,*,*,*,10日,トオカ,トオカ
放送    名詞,サ変接続,*,*,*,*,放送,ホウソウ,ホーソー
の      助詞,連体化,*,*,*,*,の,ノ,ノ
「      記号,括弧開,*,*,*,*,「,「,「
中居正広のミになる図書館        名詞,固有名詞,一般,*,*,*,中居正広のミになる図書館,ナカイマサヒロノミニナルトショカン,ナカイマサヒロノミニナルトショカン
」      記号,括弧閉,*,*,*,*,」,」,」
(      記号,括弧開,*,*,*,*,(,(,(
テレビ朝日      名詞,固有名詞,組織,*,*,*,テレビ朝日,テレビアサヒ,テレビアサヒ
系      名詞,接尾,一般,*,*,*,系,ケイ,ケイ
)      記号,括弧閉,*,*,*,*,),),)
で      助詞,格助詞,一般,*,*,*,で,デ,デ
、      記号,読点,*,*,*,*,、,、,、
SMAP    名詞,固有名詞,一般,*,*,*,SMAP,スマップ,スマップ
の      助詞,連体化,*,*,*,*,の,ノ,ノ
中居正広        名詞,固有名詞,人名,*,*,*,中居正広,ナカイマサヒロ,ナカイマサヒロ
が      助詞,格助詞,一般,*,*,*,が,ガ,ガ
、      記号,読点,*,*,*,*,、,、,、
篠原信一        名詞,固有名詞,人名,*,*,*,篠原信一,シノハラシンイチ,シノハラシンイチ
の      助詞,連体化,*,*,*,*,の,ノ,ノ
過去    名詞,副詞可能,*,*,*,*,過去,カコ,カコ
の      助詞,連体化,*,*,*,*,の,ノ,ノ
勘違い  名詞,サ変接続,*,*,*,*,勘違い,カンチガイ,カンチガイ
を      助詞,格助詞,一般,*,*,*,を,ヲ,ヲ
明かす  動詞,自立,*,*,五段・サ行,基本形,明かす,アカス,アカス
一幕    名詞,一般,*,*,*,*,一幕,ヒトマク,ヒトマク
が      助詞,格助詞,一般,*,*,*,が,ガ,ガ
あっ    動詞,自立,*,*,五段・ラ行,連用タ接続,ある,アッ,アッ
た      助動詞,*,*,*,特殊・タ,基本形,た,タ,タ
。      記号,句点,*,*,*,*,。,。,。
EOS

(サンプルそのまま)

もうこれを使ったら良いんじゃないかなあと思います。

が!やっぱり実際に様々な文言をいれていくと、そういう分け方になるのねーだったり、それはちょっといらないんだよなー、というパターンは発生します。なんていうんでしょうか、特徴語抽出とか、なんかそういうときにちょっと不便になるんですよきっと。
そんなころに、形態素解析した後に品詞を見て結合処理をすると良い、と風の噂で聞いたので試しました。

※ここからは都合によって mecab-ipadic を使っています。 neologd の結果ではないので注意。※

まずは結合処理無しのものを見てみましょう。

Target: 「3Dブロー方式」でスピード乾燥。のびる、ひろがる「ふとん乾燥アタッチメント」

[   ' BOS/EOS *',
    '「 記号 括弧開',
    '3 名詞 数',
    'D 名詞 一般',
    'ブロー 名詞 一般',
    '方式 名詞 一般',
    '」 記号 括弧閉',
    'で 助詞 格助詞',
    'スピード 名詞 一般',
    '乾燥 名詞 サ変接続',
    '。 記号 一般',
    ' BOS/EOS *',
    ' BOS/EOS *',
    'のびる 動詞 自立',
    '、 記号 一般',
    'ひろがる 動詞 自立',
    '「 記号 括弧開',
    'ふとん 動詞 自立',
    '乾燥 名詞 サ変接続',
    'アタッチメント 名詞 一般',
    '」 記号 括弧閉',
    ' BOS/EOS *']

短い文章ですが、「3」「D」と分かれていたり、「3」「D」「ブロー」「方式」はくっついていたほうがいいんじゃないかなあ、などなど。もうちょっと、なあ、という部分がありそうです(主観)
こういったものをはじめ、色々な文章をいれつつ、こっちのほうがいいなー、これはためだなー、などと、目視で結合処理を増やしていったロジックがこれです。
 

形態素解析の結果を1語ずつループし、以下の処理をしていく

  1. ()[]’" が出てきたら
    1. 次のループへ※
  2. 記号が出てきたら
    1. ただし、今が半角で構成されている、かつ、1つ前も半角であれば
      1. 1つ前に今の語を結合
      2. 次のループへ
    2. 次のループへ※
  3. 今が半角で構成されている、かつ、1つ前も半角であれば
    1. 1つ前に今の語を結合する
    2. 次のループへ
  4. 1つ前が接頭詞なら
    1. 1つ前に今の語を結合する
    2. 品詞を今のものに置き換える
    3. 次のループへ
  5. 今が接尾なら
    1. 1つ前に今の語を結合する
    2. 次のループへ
  6. 1つ前が名詞、かつ、形容動詞語幹なら
    1. 今が助詞、助動詞、副詞、非自立のいずれか
      1. 次のループへ※
    2. 新しい語として追加
    3. 次のループへ
  7. 今が非自立なら
    1. 1つ前に結合する
    2. 次のループへ
  8. 今が終助詞なら
    1. 1つ前に結合する
    2. 次のループへ
  9. 1つ前が名詞、かつ、今が名詞なら
    1. 1つ前が接尾なら
      1. 新しい語として追加
      2. 次のループへ
    2. 今が数なら
      1. 新しい語として追加
      2. 次のループへ
    3. 1つ前に結合する
    4. 次のループへ
  10. 1つ前が動詞または助動詞、かつ、今が動詞または助動詞なら
    1. 1つ前に結合する
    2. 次のループへ
  11. 1つ前が動詞または助動詞、かつ、今が助詞なら
    1. 1つ前に結合する
    2. 次のループへ
  12. 1つ前が形容詞、かつ、今が助動詞なら
    1. 1つ前に結合する
    2. 次のループへ
  13. 1つ前が助詞類接続、かつ、今が動詞なら
    1. 1つ前に結合する
    2. 次のループへ
  14. 1つ前が助詞、かつ、今が助詞なら
    1. 1つ前に結合する
    2. 次のループへ
  15. 今が接頭詞、あるいは、助詞類接続、あるいは、数なら
    1. 新しい語として追加
    2. 次のループへ
  16. 今が助詞、あるいは、助動詞、あるいは、非自立なら
    1. 次のループへ※
  17. 新しい語として追加
  18. 次のループへ

 

それではこのロジックで同じ文章を試してみましょう。

Target: 「3Dブロー方式」でスピード乾燥。のびる、ひろがる「ふとん乾燥アタッチメント」

[   '3Dブロー方式 名詞 数',
    'スピード乾燥 名詞 一般',
    'のびる 動詞 自立',
    'ひろがる 動詞 自立',
    'ふとん 動詞 自立',
    '乾燥アタッチメント 名詞 サ変接続']

結合したので、品詞や種類などはもう完全に意味をなしていませんが、先ほどよりも、なんだか自然な感じで単語が取れているのではないでしょうか?(主観)

というわけで結合するとよくなりそうだよ、って紹介でした。

   技術的な話題   

こんにちは、ごみばこです。

自然言語処理をするとき n-gram や形態素解析などの処理をし、文章から語にすることがよくあると思います。 n-gram はシンプルですが、分け具合、分け方によって情報量がなくなってしまうこともありますし、データ量も大きくなりがちです。形態素解析は簡単お手軽そうに見えますが、裏の処理はなかなかコストが高く、ちりもつもればなんとやら。

というところで、新しい選択肢の sentencepiece だそうです。

https://github.com/google/sentencepiece

私の知識や理解力の不足から雑な説明にはなってしまいますが…。sentencepiece が行うことは次のことです。

1. 文章をよろしくニューラルネットワークで処理し語に分割するためのモデルを生成
2. そのモデルを使って文章を分割する
3. n-gram や 形態素解析のような何かが得られる!やったー!

この何かで機械翻訳をすると n-gram や形態素解析などと比べて劣ることなく十分に効果を発揮した、との記録もあります。

https://github.com/google/sentencepiece#results-bleu-scores

学習する、という初期コストがかかることについては、形態素解析も同じですが、その後の分割することについては、形態素解析よりもコスト低く行うことができます。また、語彙も形態素解析で扱う辞書に比べて遥かに小さくできるそうで、パフォーマンスよし、効果よし、ととても魅力的に見えますね!

実際に収録されているサンプルを試してみました。

Read more »

   技術的な話題   

こんにちは、ごみばこです。

CSV ファイルってデフォルトでエクセルを使って開けるんですけど、どうにも文字コードを上手いことしてあげないとだめなんですよね。ということで幾つかの組み合わせについてぐぐったり、試したり、調べたのでメモ程度にー。
(ぐぐったらいろんな人が書いていて今更感もありますが・・・)

試したコードはこちら

<?php
// http://php.net/manual/ja/mbstring.supported-encodings.php
$encoding = [
	'UTF-8',
	'UTF-16BE',
	'UTF-16LE',
	'UTF-32BE',
	'UTF-32LE',
	'EUC-JP',
	'SJIS',
	'SJIS-win',
	'ISO-2022-JP',
	'CP932',
];

// https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E3%82%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%83%9E%E3%83%BC%E3%82%AF
$bom = [
	'UTF-8' => chr(0xEF) . chr(0xBB) . chr(0xBF),
	'UTF-16BE' => chr(0xFE) . chr(0xFF),
	'UTF-16LE' => chr(0xFF) . chr(0xFE),
	'UTF-32BE' => chr(0x00) . chr(0x00) . chr(0xFE) . chr(0xFF),
	'UTF-32LE' => chr(0xFF) . chr(0xFE) . chr(0x00) . chr(0x00),
];

$ary = ['abcdef', 'テスト', 'ほげほげ', '🍺🍣'];
ob_start();
echo '"' . implode('","', $ary) . '"'; // とりあえず雑に...
$buf = ob_get_flush();

// bom なし
foreach($encoding as $e) {
	file_put_contents("{$e}.csv", mb_convert_encoding($buf, $e));
}

// bomあり版
foreach($encoding as $e) {
	if (empty($bom[$e])) {
		continue;
	}

	file_put_contents("{$e}_bom.csv", $bom[$e] . mb_convert_encoding($buf, $e));
}

寿司ビールが正しく出れば Unicode も適切に処理されているはずなので安心安全ですね!

では結果を順番に見ていきましょう。















まとめるとこんな感じですね!

・CP932 や SJIS, EUC-JP などでは案の定、寿司ビールは出ません。
・UTF では BOM ありでないと文字化けしてしまいました。
・UTF-16 では LE にする必要がありました。
・UTF-16 では他のものと異なり、自動でカンマ部分の解釈がされないようでした。
・UTF-32 はダメです。

というわけで、とりあえず UTF-8 BOM あり にしておけば、色々と安心安全に動くんじゃないかなーと思います。

または、どうしても表でほしいなら xlsx を直にいじくりまわす、ですかねー。
PHP なら phpexcel 。Java なら POI 。Python なら xlrd + pandas 。
などと様々な言語から xlsx を利用する手立てがあります(あたまの良い人ありがとう)ので、これらを使っていくことも検討すべきかと思います。まあ、つらいところもあるので、難しいものなら、そもそもいる?、なんて話にした方がいいよいかもしれませんね!

   技術的な話題   

こんにちは、ごみばこです。

pv コマンド絶妙に便利なのですが、使う機会も少ないので、忘録的に書いときます。

pv ??

ivarch.com: Pipe Viewer

pv = pipe viewer の略で、その名の通り、パイプ処理のときのデータ量を可視化してくれて、絶妙に役立ちます。

pv をインストール

debian 系なら apt-get で、特に何することなくインストールするとこができます。Redhat もとい CentOS では RPMForge を導入することで yum install pv でインストールできます。

RepoForge Project

RPMForge は終了したそうです。理由としては、メンテナンスされていない古いソフトウェアが増えてきたから、とのこと。。というわけで Redhat/CentOS な方々は pv の公式サイトから rpm が公開されているので、これを利用すると良さそうです。

http://www.ivarch.com/programs/rpms/pv-1.6.6-1.x86_64.rpm

※バージョンは要確認すること。

$ sudo rpm -ivh http://www.ivarch.com/programs/rpms/pv-1.6.6-1.x86_64.rpm
$ pv --version

pv を使う

たとえば圧縮された SQL をドバーッと mysql に流したい…。

$ bzcat dump.sql.bz2 | mysql -uroot -pxxxx

が、これでは、ちゃんと進んでいるのかわからにくい! ここで pv を使うと…

$ bzcat dump.sql.bz2 | pv | mysql -uroot -pxxxx
1.81GiB 0:02:31 [ 12.4MiB/s] [                      <=>           ]

こんな出力がされ、流れるデータ量が可視化されます!

更に pv は複数に渡って記述ができるので…
(公式サイトに記載されているものとほぼ同じですが。。)

$ pv -cN source < dump.sql.bz2 | bzcat | pv -cN bzcat | mysql -uroot -pxxxx
    bzcat:  109MiB 0:00:18 [7.60MiB/s] [            <=>                     ]
   source: 52.7MiB 0:00:19 [3.89MiB/s] [=====>              ] 27% ETA 0:00:50

終わりそうな目処感と流れるデータ量を可視化できます!

まとめ

pv を使うことでパイプに流れるデータ量を観測することができます。これによっていつ終わるのか不安に思える作業もある程度は見える化されて便利~!

   技術的な話題   

こんにちは、ごみばこです。

これまで SublimeText ユーザだったのですが、ここのところずっとPHP書きがおおいので、本格的に PhpStorm に乗り換えました。やっぱり IDE すごいっすねー、静的解析強力過ぎやしませんかね。

PhpStorm: Lightning-Smart IDE for PHP Programming by JetBrains

という話は今回ではないのですが。

PHP も書きつつ、機械学習だなんだーとやる機会もあって Python を書くことも増えてきました。そこで PhpStorm でも Python のハイライトくらいはできるよーって紹介です。

PyCharm があるよね?

PhpStorm と同じく JetBrain 社から PyCharm という Python 向けの IDE も出ています。が、これを使うにはまた別途ライセンスを買わないと。。そこまでガッツリと書いているわけでもないしなあ。。。ということで基本的に SublimeText を使って Python を書いています。

PyCharm: Python IDE for Professional Developers by JetBrains

ある日、ふと PhpStorm も IDE だし、プラグインかなにかでハイライトくらいはできるんじゃないの? と思い調べたところ、スルッと出来ました。ただし、できるのはハイライトまでで、静的解析やその他の言語サポートは利用できません。PhpStorm にある機能(検索、置換、etc...)ならばできます。

背景には PHP と Python とが合わさったプロジェクトをやることがあり、エディタを度々切り替えるのもなんだかなーまとめられないかなー、というところからです。

TextMate Bundles Support

TextMate はご存知でしょうか?

textmate/textmate: TextMate is a graphical text editor for OS X 10.9+

Mac 向けのテキストエディタなのですが、そのエディタで使える言語定義ファイルである tmbundle を PhpStorm はじめとした各種の JetBrain 社の IDE で利用することができます。これによりプラグインを含めて IDE がサポートしていない言語、設定ファイルなどをハイライトすることができます。

そんな機能を使うには、まず TextMate Bundles Support を有効化する必要があります。

plugins -> textmate bundles support

次に tmbundle ファイルを探します。これは TextMate オーガナイゼーションに多数あるので、そこから探すと良いでしょう。ここでは python.tmbundle をダウンロードします。

Search · org:textmate tmbundle

textmate/python.tmbundle: TextMate support for Python

このファイルは、どこかわかりやすい場所にまとめると良いでしょう。
そうして準備ができたファイルを PhpStorm で読み込みます。

settings -> editor -> textmate

このとき TextMate と PhpStorm とで、カラースキーマを合わせる設定をします。IDE Color Schema に合わせて TextMate Color Schema を設定していきます。私の場合は Monokai copy という名前で Monokai をちょっと弄ったものを使っているので、これに合わせて Monokai を選びます。(すべて Monokai になっていますが使っているテーマに合わせて、だけでよいです。)

 

以上で設定は完了です。これで Python がシンタックスハイライトされるようになりました。カッコが気持ち悪いのは autopep8 したからです。。

まとめ

PhpStorm でも TextMate Bundles Support を有効にすることで言語定義ファイルの tmbundle を利用できるようになりました。このファイルをどんどん入れていけば、他の言語もハイライトされるようになっていきます。TextMate リポジトリを見てわかるように、かなりの定義ファイルがあります。

ただ、仕事や趣味問わずですが、ガッツリと使っていく予定があるならば、言語環境にあったエディタや IDE を利用したほう生産性も上がっていくと思います。余程のエディタ愛があるならともかく、環境に合わせて使う道具も切り替えていきたいですね!

ガチで書くわけではなく、ちょっとやりたいんだよね、というくらいなら tmbundle で十分だと思います。ぜひお試しください!

   技術的な話題   

こんにちは、ごみばこです

実はさらっと、ごみばこいんを https にしてました。
以前にも一度やっていたのですが、何かに詰まり、元に戻していました。またやったら特に問題なく出来てしまったので、何だったんだろう…。。

個人のひっそりページで証明書買うのもなあ、ということで Let's Encrypt でhttps化を行いました。

そのやったことなんかを簡単に説明していきます。

Read more »

   技術的な話題   

こんにちは。ごみばこです。

某所で激安 CSS が盛り上がり、実際に使うとなったら JS に全部書かれていて、数字だけ入った要素に適用されると嬉しいだろうなあ~、と思ったので、作ってみました。

※激安 CSS についてはこちら > http://qiita.com/shiozaki/items/0e42e101b7483df13c8f

せっかくなので、ただ作るではなく、普段書かないようなメソッドや記述を盛り込んでみようかなあと。

  • ライブラリを使わない
  • document.querySelector と document.querySelectorAll で要素検索
  • テンプレートリテラルで CSS の定義
  • innerHTML じゃなくて createElement で地道に作っていく
  • let! let!
  • アロー関数でクロージャ

 

↓実際に実行するとこちらになります

 

あの大人気の掃除機が今だけナント!49800


<p>あの大人気の掃除機が今だけナント!<span class="gekiyasu">49800</span></p>
<script src="/tool/gekiyasu.js"></script>
<script>gekiyasu.initialize();</script>

 

元の CSS 作者に圧倒的感謝🙏

   技術的な話題   

こんにちは。ごみばこです。

ちょっと思い立って、TensorflowをGPUで動かしたくなったので、その構築メモを残しておきます。

カンタンなまとめ

  • AWS EC2 で g2.2xlarge を スポットインスタンスで使った
  • Tensorflow の学習データを 60GB の付属するストレージに置いた
  • crontab と aws-cli を使って定期的に AWS S3 に学習データ(の一部)を転送した
  • tensorflow と tensorflow_gpu を間違えるとかなしい
  • 2日くらいで試行錯誤した成果は得られなかった

Read more »

   技術的な話題   

こんにちは。ごみばこです。

packagist に公開してあるので composer require regexp-trie:dev-master とでもしたらすぐに使うことができます。

sters/regexp-trie - Packagist

 

use RegexpTrie\RegexpTrie;

$regexpTrie = RegexpTrie::union([
    'C','C#','C++','Clojure','CoffeeScript','CommonLisp',
    'Java','JavaScript','JScript','J#','JSX',
    'Perl','PHP','PostScript','PowerShell','Python',
]);

var_dump($regexpTrie->toRegexp());
// =>
//     /(?:C(?:(?:\+\+|lojure|o(?:ffeeScript|mmonLisp)|#))?|J(?:ava(?:Script)?|S(?:cript|X)|#)|P(?:erl|HP|o(?:stScript|werShell)|ython))/

これは正規表現において Wikipedia や はてなキーワード のような、多数のキーワードを同時に処理しようとすると、選択が多数になるものができあがり、非常にパフォーマンスが悪いものを、トライ木を使って解決するためのものです。

元ネタはこのあたり。

このトライ木による正規表現の生成ですが、ご覧のとおり Perl や Ruby ではすでに作られているようで PHP には特に見当たらなかったので Ruby のものから翻訳してみました。( Perl のソースはちょっと分からないところだらけ過ぎてつらかったので… )

追)PHP には特に見当たらなかったと思っていたのですが packagist を見たらそれっぽいものがありました。。

s9e/regexp-builder - Packagist

ちゃんと実装を追っていないのですが Regexp::Asemble っぽい挙動をしているような…?

   生活   

みなさん、あけましておめでとうございます。
今年の僕のテーマは本気!
本気になれば自分が変わる!本気になれば全てが変わる!!
さあ、みなさん本気になって頑張っていきましょう!

松岡 修造

Read more »