読者です 読者をやめる 読者になる 読者になる

takedajs ログ

備考録

タブの色を変えるFirefoxアドオンを開発した

自分が欲しいと思った機能があるFirefoxアドオンがなかったので、開発しました。 前回はアドオンの開発環境構築まで書きました。今回は開発したアドオンについて書きます。

開発したアドオン

内容

表示されているページのURLに指定したキーワードが入っている場合、そのページのタブを赤くします。 以下、指定キーワードに「yahoo」を入れた場合です。キーワードは複数選択可能です。

URLに「yahoo」がある為、タブが赤くなっている。

URLに「yahoo」がない為、タブの色は変わらない。

開発した理由

開発環境サイトと本番環境サイトを見分けるためです。 開発環境と本番環境の違いをURLを毎回見て確認していました。 本番環境のURLを指定キーワードに追加することで、タブが赤くなったら本番環境と認識できます。 その結果、本番環境での操作ミスを減らすことができるのではないかと考えました。

導入方法

このアドオンは、公開するために必要なMozilaに申請を行っていません。 そのため、ローカルでのみアドオン導入が可能です。 ローカルでのアドオンの導入方法についても前回の記事に記述しています。

以下、大まかな導入までの流れです。
Githubからソースをclone
・任意の指定キーワードを設定するためにコードを修正
・xpiファイルを作成
Firefoxに導入

アドオンの中身

メインのファイルであるindex.jsを添付します。 ウィンドウ内のレイアウトを変更することは簡単なのですが、タブの色を変更する処理の実装方法が分からず少し躓きました。 userChrome.cssを変更する必要があることが分かり、XPCOMという技術を利用して実装しました。 (var sss, var ios の箇所)

gist2f90c2568bf39275267fd59c28dcd72d

まとめ

ローカルのみでしか導入できませんが、欲しかった機能を持ったアドオンを開発できました。 今後改良していく予定は未定ですが、やるとしたら以下を行っていきたいです。
Chromeと互換性があるWebExtensionで作り直して公開する。
・メニューバーから指定キーワードの設定、色の設定を可能にする。

参考

tabs - Mozilla | MDN

GitHub - func0der/colorfulTabs: A firefox extension originally written by binaryturf with some modifications

スタイル | Firefoxアドオン開発

XULで動的にスタイルシートを読み込む方法が分かった - mollifier delta blog

nsIStyleSheetService - Mozilla | MDN

macでFirefoxのアドオン開発環境を構築する

メインブラウザはFirefoxを利用しています。自分が欲しいと思った機能があるFirefoxのアドオンがなかったので、作成していきます。 今回は、アドオンの開発環境構築までを書きました。

Firefoxのアドオンについて

アドオンの種類

アドオンには以下3つがありますが、今回は拡張機能を作っていきます。

開発方法

最新の開発方法として、複数ブラウザで動作するWebExtensionを用いた方法がありますが、 参考になる記事が少なかったため、一つ前のjpmを利用した開発方法で行います。

開発環境構築

npm導入

npmでjpmをインストールするため、Node.jsを導入します。 Node.jsのバージョン管理ツールであるnodeBrewを利用します。 Node.jsが既に導入されている方は、こちらは飛ばしてください。

nodebrew導入

$ wget git.io/nodebrew
$ perl nodebrew setup
$ $export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bashrc

nodebrew導入確認

$ nodebrew help

Node.jsの安定版(stable)バージョンをインストール

$ nodebrew install-binary stable

インストール確認

$ nodebrew ls
v7.7.4
current: none

利用バージョン選択

$ nodebrew use v7.7.4
use v7.7.4

Node.js導入確認

$ node -v
v7.7.4

npm導入確認

$ npm -v
4.1.2

jpm導入

$ npm install jpm -g

開発準備

任意の場所に作業ディレクトリを作成

$ mkdir test_addon
$ cd test_addon

ディレクトリの初期化
色々と質問されますが、今回はサンプルなので適当に記述します。

$ jpm init
title: (My Jetpack Addon) test_addon
name: (testaddon) test_addon
version: (0.0.1)
description: (A basic add-on) test_addon
entry point: (index.js)
author: takedajs
engines (comma separated): (firefox,fennec)
license: (MIT)
JPM [info] About to write to /Users/shoheitakeda/workspace/src/test_addon/package.json:

{
  "title": "test_addon",
  "name": "testaddon",
  "version": "0.0.1",
  "description": "test_addon",
  "main": "index.js",
  "author": "takedajs",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "keywords": [
    "jetpack"
  ]
}

Is this ok? (yes) yes

ディレクトリ配下に以下のようなファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
└── test
    └── test-index.js

Firefoxにアドオンを導入

アドオンのパッケージ化

$ jpm xpi

パッケージ化すると、xpi拡張子のファイルが作成されます。

$ tree
.
├── README.md
├── index.js
├── package.json
├── test
│   └── test-index.js
└── testaddon.xpi

アドオン導入確認
作成した拡張機能だけが導入されたFirefoxが立ち上がります。

$ jpm run

立ち上がったFirefoxのアドオンマネージャーを見てみると、アドオンが一覧に表示されています。 ですが、アドオンが検証できず利用できませんとアラートが出ています。 Mozillaに申請して許可が下りないと開発段階であってもFirefoxに導入できないみたいです。(マジで?笑)

f:id:takedajs:20170326091343p:plain

ですが、諦めるのはまだ早く、なんとか導入する方法があります。 以下、導入の流れを書いていきます。

歯車をクリックしてアドオンをデバッグを選択

f:id:takedajs:20170326091423p:plain

開発ツールデバッガー画面が表示されます。

f:id:takedajs:20170326091503p:plain

「一時的なアドオンを読み込みむ」をクリックして、先程 $ jpm xpi コマンドで作成したアドオンのパッケージ(xpi拡張子)を読み込みます。

f:id:takedajs:20170326091531p:plain

読み込むと作成したアドオンが一覧に追加されています。

f:id:takedajs:20170326091606p:plain

拡張機能一覧画面に戻ると先程出ていたアラートが消えて、導入されていることが分かります。

f:id:takedajs:20170326091631p:plain

申請をしなくても開発段階のアドオンを導入することができました。(良かったー。) これで開発中のデバックをすることができますが、修正を加える度に毎回パッケージ化して ファイルを読み込まないといけないので、かなり面倒ですね。

まとめ

アドオン開発が初めてで何も分からない状態から始めましたが、開発環境ができたのでなんとか開発していけそうです。 次は、公式ページに載っているチュートリアルの参考にして、簡単なサンプルを作ってアドオン開発の理解を深めて行きたいと思います。 自分が欲しいと思った物を作っていくのはやはり楽しいですね。

参考

初めてでも理解できるようになる「Firefox機能拡張の開発」 | OXY NOTES

MacにNode.js環境を作る(nodebrew) - Qiita

ポモドーロ・テクニックを1年間やり続けてみた。

生産性を上げたいと考えてたときに、ポモドーロ・テクニック(以下、ポモドーロ)を知りました。仕事とプライベートで1年間やり続けてみたので、ポモドーロを使った自己流のやり方やおすすめのタイマーを紹介します。

ポモドーロ・テクニックとは

ご存知の方も多いと思いますが、改めて記述します。

25分の集中した時間を1ポモドーロとし、1ポモドーロが終わるたびに5分の休憩します。 そして、4ポモドーロが終わったら、15分程度の休憩を入れる

自己流のやり方

ポモドーロをやり初めてから色々と試行錯誤して、自分にあったやり方にアレンジしていきました。以下、ブログを書いて公開するまでのタスクを例に上げて、ポモドーロを利用した自己流のやり方です。

1. ブログを公開するまでの段取りを考え段取りリストを作成する

以下のように段取りリストを書きます。作業内容の横には、ざっと作業時間を書きます。

■ブログを公開する
15 書くお題を考える
15 箇条書きで内容を書く
50 詳細を書く
10 画像を用意する
10 はてブの管理画面で清書する
5 公開する

作成した段取りリストは、いつもデスクトップ付箋に記述しています。 ショートカットキーで最前面に付箋が表示され、すぐに段取りリストが確認できるのでオススメです。

2. 25分でタイマーをスタートする

先程の段取りリストを確認して、25分でどの作業までできるかを軽く把握します。
そして、作業に入る前に25分でタイマーをスタートします。

Macで作業しているのですが、いつもこのタイマーを使ってポモドーロをしてます。(オススメです。)

Activity Timer

Activity Timer

  • HAPPY CODING UG (haftungsbeschränkt)
  • 仕事効率化
  • 無料

f:id:takedajs:20170310121106p:plain

Activity Timerの良い点
・余計な機能がなくて良い。シンプルイズベスト!
・メニューバーに時間が表示され、常に時間を確認できる。
・ポモドーロ専用タイマーではないので、25分が終わっても自動で5分休憩のカウントがされない。ただ逆にそれが良くて、「タイマーをスタートしたら集中するぞ」と考えるようになり、自分には合っていた。

3. 25分のタイマーが終了するまで作業に集中する

仕事中は、メンバーから質問など話しかけられることがあると思いますが、その時はそちらを優先します。
差し込みのタスクを振られたときは、付箋に内容を簡単にメモしておくだけです。基本的に、タイマーをスタートする前にこの25分でやると決めたことだけを行います。

4. 休憩

25分のタイマーが終了したら、たとえ今やっている作業が順調にでき気持ちが乗っていても、強制的に休憩を取ります。これがかなり重要だと思います。
作業し続けると疲れが貯まってくるので、強制的に休憩を取ることで、結果的に長い時間を集中して作業できるようになります。

Activity Timerでの25分終了のアラート表示はこんな感じです。 プッシュ通知がくるので、終了を気づけます。

f:id:takedajs:20170310121117p:plain

正しいポモドーロのやり方だと5分を計って休憩を取りますが、時間の設定が面倒なので僕は時間を計っていません。

休憩中はやること
・トイレに行く or ウォーターサーバーに水分を取りに行く。
・前のポモドーロでやり終えた作業を段取りリスト上で以下のようにインデントする。これをやることで、作業が完了しているものと完了していないことが明確に分かります。(取り消し線でも良いですが、インデントはtabボタンを押せば簡単にできるので)

■ブログを公開する
    15 書くお題を考える
    15 箇条書きで内容を書く
50 詳細を書く
10 画像を用意する
10 はてブの管理画面で清書する
5  公開する

5. 2からまた始める

このように25分+休憩を1セットとして行います。 3セットが終わったら何かしら気分転換になるものを入れてます。(MTGやコーヒーブレイク)

やり続けた感想

仕事とプライベートで1年間やり続けての感想です。

良い点

作業にリズムがでるようになった
 25分+休憩という決まったリズムで作業しているため、その時の気分に関わらず淡々と作業ができます。

短時間で集中できるようになった
 25分のタイマーをスタートさせる前に「タイマーをスタートしたら集中するぞ」と考えるようになり、スタートさせた瞬間からすぐに集中モードに入れるようになりました。

長時間集中できるようになった
 気分が乗っているときは疲れていないように感じますが、時間が経つにつれて集中力が落ちてきます。強制的に休憩を入れることで、長時間集中できるようになりました。

悪い点

ポモドーロなしでは作業ができなくなった
 これに尽きます。体が完全にポモドーロ仕様になっています。25分のタイマーをスタートせずに作業をすると体がそわそわします。

まとめ

休憩時間など細かく取るようになりましたが、結果的に生産性がかなり上がったと思います。今回書いた内容は色々と試してみて僕に合ったやり方なので、皆様も実際にポモドーロをやってみて自分に合ったやり方にカスタマイズしてみてください。
是非、良いポモドーロライフを!

mod_small_lightを利用して画像のリサイズを行う

指定したサイズで画像をリサイズするため、サーバ側でリサイズ処理を可能にするApacheモジュール「mod_small_light」を導入して試してみました。

同様の処理を行ってくれるmod_dimsやmod_tofuなどもありますが、Nginx版も開発されているmod_small_lightを使ってみました。

開発環境

mod_small_light利用に必要なもの

mod_small_lightを利用するために必要なものの導入や設定をしていきます。

Apacheモジュールを追加するために必要なapxsを導入。

$ sudo yum install httpd-devel

apxs導入確認。

$ ll /usr/sbin/apxs

-rwxr-xr-x 1 root root 22029  1月 12 17:09 2017 /usr/sbin/apxs

画像変換エンジンにImageMagickとimlib2を利用できるため、2つを導入していきます。

ImageMagick導入。

$ sudo yum -y install ImageMagick ImageMagick-devel

ImageMagick導入確認。

$ convert -version

Version: ImageMagick 6.7.2-7 2016-06-16 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2011 ImageMagick Studio LLC
Features: OpenMP

imlib2導入。

$ yum install http://dl.fedoraproject.org/pub/epel/6/x86_64/imlib2-1.4.2-5.el6.x86_64.rpm \
              http://dl.fedoraproject.org/pub/epel/6/x86_64/imlib2-devel-1.4.2-5.el6.x86_64.rpm

imlib2導入確認。

$ yum list installed | grep imlib2

imlib2.x86_64        1.4.2-5.el6        @/imlib2-1.4.2-5.el6.x86_64
imlib2-devel.x86_64  1.4.2-5.el6        @/imlib2-devel-1.4.2-5.el6.x86_64

以下の3つのモジュールが有効になっている必要があります。
rewrite、proxy、proxy_http

モジュールが有効になっているか確認。

$ apachectl -M | grep rewrite

rewrite_module (shared)

mod_small_light導入

mod_small_light導入

$ cd /usr/local/src
$ git clone https://github.com/yamac/smalllight.git
$ cd smallight
$ ./configure --with-apxs=/usr/sbin/apxs \
              --with-Wand-config=/usr/bin/Wand-config \
              --with-imlib2-config=/usr/bin/imlib2-config \
$ sudo make
$ sudo make install

パーミッション変更(すでに775の場合はやる必要がないです。)

$ chmod 755 /usr/lib64/httpd/modules/mod_small_light.so

mod_small_lite導入とApacheモジュール追加を確認

$ ll /usr/lib64/httpd/modules/mod_small_light.so

-rwxr-xr-x 1 root root 150140  2月 24 13:01 2017 /usr/lib64/httpd/modules/mod_small_light.so
$ cat /etc/httpd/conf/httpd.conf | grep small_light

LoadModule small_light_module /usr/lib64/httpd/modules/mod_small_light.so
$ apachectl -M | grep small_light_module

small_light_module (shared)

mod_small_light利用設定

指定URLでアクセス時にリサイズ画像を表示させるために、httpd.confを修正します。

httpd.confバックアップ。

$ cd /etc/httpd/conf
$ sudo cp httpd.conf httpd.conf.bak

httpd.confの任意の場所に以下を記述。

RewriteEngine on
RewriteRule ^/images/(.+)$ /images/$1 [L]
RewriteRule ^/resize/(.+)x(.+)/(.+)$ /small_light(dw=$1,dh=$2,ds=s,e=imagemagick)/$3 [P,L]
RewriteRule ^/small_light[^/]*/(.+)$ /images/$1
<LocationMatch ^/small_light[^/]*/>
    SetOutputFilter SMALL_LIGHT
</LocationMatch>

上記の記述内容の説明です。
・/iamges/画像名でアクセスされたときはリサイズしていない画像を表示。
・/resize/100x100/画像名でアクセスされたときは、100x100でリサイズした画像を表示(100は任意の数字)
・e=imagemagickを記述することで、画像変換エンジンにImagemagickを利用できます。

httpd.confを修正したので、Apacheの再起動。 *1

$ sudo service httpd restart

画像リサイズ結果

リサイズ前と後の画像を表示します。
mod_small_lightによって指定サイズにリサイズされていることが分かります。

リサイズ前(http://192.168.33.10/images/image.jpg)

f:id:takedajs:20170226193923p:plain

リサイズ後(http://192.168.33.10/resize/100x100/image.jpg)

f:id:takedajs:20170226193934p:plain

まとめ

mod_small_lightは、Apacheモジュールとして追加するだけで画像リサイズができるので便利ですね。
ただ、当たり前ですが画像リサイズの処理に時間がかかるので、画像キャッシュなどを上手く利用する必要があります。
今後は、高速なJPEG圧縮ライブラリ「Libjpeg-Turbo」を導入した状態でのリサイズや、もう一つの画像変換エンジンであるimlib2とImagemagicの処理スピードや画像リサイズのクオリティ比較などをやっていきたいと思います。

参考

mod_small_light で動的に画像リサイズ - akishin999の日記

ImageMagick + 画像サムネイル作成 Apache モジュール SMALL LIGHT をインストール - Code Life

GitHub - yamac/smalllight: The SMALLLIGHT is a module of Apache2 which provides a dynamic image transformation.

Google Code Archive - Long-term storage for Google Code Project Hosting.

*1:当初CentOS7、Apache2.4の環境でmod_small_lightの導入を考えていましたが、mod_small_light導入後のApacheの再起動が上手くできず今回の環境に変更しました。
なぜできなかったのか、未だに謎です。。。

PHPでHTTP並行リクエスト処理を行う

PHPで複数のAPIから並行でデータを取得するために、PHPのHTTPクライアントライブラリである「Guzzle」のsendAllメソッドを利用してみました。
検証として、直列と並行でのデータ取得時間を比較しています。

今回の記事は、サーバにGuzzleが導入してある前提で書いています。
まだ導入されていない方は、こちらの記事を参考に導入まで行ってみてください。

開発環境

  • Vagrantで構築
  • OS: CentOS7
  • PHP: 5.6.30
  • Guzzle: 4.2

検証用コード

Guzzleでデータを直列に取得するパターン(send.php)と、並列に取得するパターン(sendAll.php)のコードを書きました。
コードの内容は、作成したAPIに扮したページ(api.php)から取得したデータを表示させています。

send.php(直列取得)

sendAll.php(並列取得)

api.php

send.phpとsendAll.phpとも以下のような情報が取得できます。
APIごとに配列に要素名を指定して実装しているので、APIごとのデータの扱いが簡単です。

実行結果

array(3) {
  ["no_1"]=>
  string(1) "1"
  ["no_2"]=>
  string(1) "2"
  ["no_3"]=>
  string(1) "3"
}

検証結果

直列と並列取得での処理速度の結果(3回計測の平均値)です。
APIの処理がだいたい5秒なので、計測結果から上手く並列で情報が取れていたことが分かります。

直列取得(send.php)
約15.13秒

並列取得(sendAll.php)
約5.12秒

まとめ

GuzzleのsendAllメソッドを利用することで、PHPで並行リクエスト処理を行えることが分かりました。
sendAllを利用して実装している記事が少なく、API側から取得した情報を表示するのに苦労しましたが、何とかできて良かったです。
サイトパフォーマンス的に並行処理はかなり貢献度が大きいと思うので、Guzzleで簡単にできるのはありがたいですね。

次は、Guzzle5から利用できるようになった、非同期処理ができるGuzzle Promiseを試してみたいと思います。

参考

PHPでHTTPの並行ダウンロードを実現する(Guzzle編) - hnwの日記

Clients — Guzzle Documentation

Guzzle Promiseを使った 非同期処理によるAPIコールの高速化 - SSSSLIDE