アシアルブログ

システム開発エンジニア募集！

小林有佳 — Fri, 03 Feb 2012 17:16:01 +0900

こんにちは。小林です。

アシアルでは、新規事業の拡大、受注案件の増加に伴い新しい仲間を募集しております。ブログをご覧いただいている皆さんの中に、「我こそは！」と思う方がいらっしゃいましたら、以下の応募フォームより、ご連絡いただけたらと考えます。

Find job 応募ページ（※ Find Jobサイトへ飛びます）
https://www.find-job.net/list/j86364.html?from=23

※ Find Jobのアカウントをお持ちでない方は、アシアルの採用募集ページの案内に従って、ご連絡いただけたらと思います。

【募集要項】

● 職種：プロジェクトマネージャ、システムエンジニア、プログラマ
● 業務内容

アシアルでは、単にアプリケーションを開発するだけでなく、業務にあわせたさまざまな業務を行っていただいております。

具体的には、以下の3つの業務があげられます。

1. Webシステム構築・スマートフォンアプリ開発

Webシステムの設計・開発業務に関わって頂きます。
※開発に関しては、自社システム（自社サービス）、受注案件のシステム開発の両方行っています。

* Webアプリケーション開発（PC・携帯ともに開発しています。）
* Webアプリケーションの保守・運用
* サーバーの構築、保守、運用
* スマートフォン（iPhone, Android）アプリ開発

2. プログラマ向け製品のサポート

プログラムのスキル、ご経験、ご希望により相談させて頂きますが、具体的には、いずれかの業務を行って頂きます。

* システム開発を通じて、最新のPHP技術や開発メソッドを追求
* システムのテクニカルサポート、ドキュメントやWebサイトの整備を含めたサポート業務
* 自社Webサービスの企画立案・構築・運用

3. スクール・メディア事業への取り組み

また、その他にもアシアルは、PHPのポータル＆コミュニティサイトPHPプロ！やPHPスクールの運営、オープンソースコミュニティへの参加を行っており、下記のような幅広い分野で、経験を活かして頂けます。

* PHPプロ！からPHPの最新技術情報の発信
* PHPスクールの講師－実際に生徒さんに授業を行う
* 書籍・Webメディア(ITプロ等)の執筆活動
* PHPユーザー会(PHPカンファレンスの積極参加)、smartyなどオープンソースコミュニティへの貢献

● ママさん社員も活躍してます！

女性の方、ママさん社員も大歓迎です。
私自身もそうですが、メンバーの理解や協力のおかげで、仕事も子育ても楽しんでいます。毎月開催される誕生会や、社員旅行など、息子も一緒に参加させていただいております。

皆さんからのご応募、心よりお待ちしております。

※ ひそかに、以前、ブログデビュー（ブログ過去記事：社員旅行に行きました）しておりますが、改めて宜しくお願いします。

OpenVPNで細々便利な設定

門脇優児 — Tue, 31 Jan 2012 19:40:26 +0900

以前OpenVPNについて紹介しましたが、今回はもう少し深い部分について書こうと思います。

１・ルート追加
例えば、下記のようにVPNサーバのセグメント以外に接続先ネットワークを指定する場合に使用できます。

|クライアント|-----|VPNサーバ|------|接続先サーバorネットワーク|

■サーバ側からpushする方法
接続する全クライアントに対して適用させることができます。

設定方法は簡単で、サーバ側の設定ファイルに下記のように追加してください。
※L3を使用している場合に使用可能な方法です。
　L2を使用する場合は調べきれていないので割愛。

push "route 192.168.10.0 255.255.255.0"

pushにて第一引数にクライアントで実行するコマンドを指定、
routeは、第一引数に接続先ネットワーク、第二匹数にネットマスクを指定

上記設定のみで、接続先ネットワークに行くにはこのVPNサーバを使用するという命令を発行できます。
OpenVPNサーバを再起動後、クライアントから接続すれば適用されているはずです。

実は、下記のように書けばメトリックを指定できますので、
PCでは年中OpenVPNを起動しておいて、社内に移動した時は通常のLANを使用(Metricが0なので)、社外に出た時はOpenVPN経由にするなどの使い方ができます。

push "route-metric 100"

■クライアント側で指定
一部のクライアントのみ有効にしたい場合などは、クライアント側に指定もできます。
指定というか、起動時にrouteコマンドを実行するだけですが、

route-up "route add -net 172.16.0.0/16 gw 10.0.0.1"

route-up で、任意のコマンドを実行できるので、routeコマンドを直接実行します。

■その他、クライアント側で指定する場合
L2で接続している場合は、見える範囲なら普通にrouteコマンドを使用出来ます。
L3で接続している場合ですが、クライアント側から出ていくためのゲートウェイが存在しますので、そこに投げればOKです。

※クライアントが192.168.100.6の場合
$ /sbin/route -n
(ry)
192.168.100.5 0.0.0.0 255.255.255.255 UH 0 0 0 tun0 <- VPN側のGWへのルート
192.168.10.0 192.168.100.5 255.255.0.0 UG 100 0 0 tun0 <- 接続先へはVPNのGWを通る

２・暗号化方式の変更

下記のように指定してやれば暗号化方式を変更することができます。
速度と強度の兼ね合いでお好きな物をご使用ください。

cipher aes-256-cbc

方式のアルゴリズムや強度については割愛します。
なお、自分の場合はAES256を使用しています。

こっちの方が重要で、AES-NI対応のCPUの場合は数倍のスループットを引き出せるようです。
※自分の場合はサーバが対応していないため未検証
設定は下記のようになります。

engine aesni

以上、少し便利にする設定でした。

【iOS】Viewの開発・デバッグに役立つ色々

中川善樹 — Mon, 23 Jan 2012 16:49:15 +0900

こんにちは、中川です。

最近はちょっとPHPから離れてMonacaを使ったiOSアプリの開発を行なっています。
Monacaでは基本的にHTML+CSS+JSでの開発となりますが、
今回開発中のものはObjective-Cを使ったネイティブの画面をカスタムで組み込んで利用したりしています。

HTML+CSSであれば画面を作るのは慣れていることもあり比較的簡単なのですが、
UIKitでのネイティブ画面となると微妙なズレの調整などで苦労する場面が多々ありました。
そんな時に役立ったTIPSなどをご紹介したいと思います。

■位置やサイズのログ出力

CGRect, CGSize, CGPoint など、NSStringFromXXXXXで簡単にログ出力することができます。

NSLog(@"frame: %@", NSStringFromCGRect(self.view.frame));
NSLog(@"size: %@", NSStringFromCGSize(self.view.frame.size));
NSLog(@"center: %@", NSStringFromCGPoint(self.view.center));

※出力結果

2012-01-23 15:51:51.125 Sample[23110:f803] frame: {{0, 0}, {320, 411}}
2012-01-23 15:51:51.127 Sample[23110:f803] size: {320, 411}
2012-01-23 15:51:51.128 Sample[23110:f803] center: {160, 205.5}

知ってる人には常識なことかもしれませんが、知るまでは size.width, size.heightなどと個別に出力してました。。。

■Viewのログ出力

UIVIewのframeなどは、上記のようにしなくとも、

NSLog(@"view: %@", view);

これで、

view: 0x68aa750; frame = (0 0; 320 411); autoresize = W+H; layer = 0x68aa7d0>>

このように確認することもできます。

■Viewを再帰的にログ出力

指定したViewを再帰的にダンプすることができます。

NSLog(@"%@", [view performSelector:@selector(recursiveDescription)]);

※出力例

0x68ccc40; frame = (0 0; 320 411); autoresize = W+H; layer = 0x68cccc0>>
| 0x68c3cc0; frame = (54 98; 212 43); text = 'First View'; clipsToBounds = YES; opaque = NO; autoresize = W+BM; userInteractionEnabled = NO; layer = 0x684d680>>
| 0x68cce10; frame = (20 181; 280 88); text = 'first view...'; clipsToBounds = YES; opaque = NO; autoresize = W+BM; userInteractionEnabled = NO; layer = 0x68cc200>; contentOffset: {0, 0}>
| | 0x68cd230; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = 0x68c47a0>>
| | 0x68cdea0; frame = (273 54; 7 34); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; layer = 0x68cdf10>> - (null)
| | 0x718dc00; frame = (0 0; 280 34); text = 'first view...'; opaque = NO; userInteractionEnabled = NO; layer = 0x68d15f0>>
| | | 0x68d1b00> (layer)
| | 0x68dbb80; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = 0x68dbbe0>>

※スクショ：

■DCIntrospect

https://github.com/domesticcatsoftware/DCIntrospect

ちまちまログでやってられないって時に。
シミュレータ上でリアルタイムにビューの位置の確認、調整、ダンプ、カラーリング
などが行えます。これを知るまではViewの調整に非常に苦労しました・・・。

上記ページからダウンロードして「DCIntrospect」をプロジェクトに追加します。
DCIntrospect内で「QuartzCore.framework」を利用しているようですのでこちらも追加してください。
あとはAppDelegateなどで、以下のように組み込みます。

:
:
[window makeKeyAndDisplay]
// always call after makeKeyAndDisplay.
#if TARGET_IPHONE_SIMULATOR
[[DCIntrospect sharedIntrospector] start];
#endif
:
:

これでシミュレータでアプリを起動してPCのキーボードのスペースを押すと
インスペクタが起動します。

Viewにボーダーや背景色を付けてデバッグしやすくしたり、Viewを矢印キーで移動させたりできます。
他にも画面上のViewを選択して「p」や「v」などで、ログ出力がアプリを起動しながら行えます。

「?」でヘルプ画面を表示できるという親切設計です。

■Stats

https://github.com/shu223/Stats
メモリ使用量やViewの数を表示しておくことができます。
使い方はいたって簡単で上記githubからダウンロードして、
AppDelegateなどに仕込んでやるだけと簡単です。

#import "Stats.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
:
:
Stats *stats = [[[Stats alloc] initWithFrame:CGRectMake(10, 30, 100.0, 60.0)] autorelease];
[self.window addSubview:stats];
:
:
return YES;
}

これで以下のように常に画面に表示しておくことができます。

※参考: http://d.hatena.ne.jp/shu223/20110428/1303930059

■(おまけ) UIWebView内のデバッグ

あと、PhoneGapなどで開発していると、WebView内のHTML,JS,CSSをデバッグしたくなりますよね。
そんな時には以下のものが役に立ちました。
・weinre ( http://phonegap.github.com/weinre/ )
scriptタグをひとつ追加するだけで、WebkitのWebInspectorを使ったデバッグができるようになります！

・remoteデバッグ
シミュレータかつiOS5からとなりますが、以下の方法でもPCのSafariのWebInspectorを利用したデバッグが可能です。
こちらは、ブレークポイントも使えるJSのデバッグが可能になります。
AppDelegateなどで、

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
:
:
[NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];
:
:
}

として、アプリを起動しWebViewの画面を表示します。
そしてPCのSafariで、http://localhost:9999/ にアクセスしてみてください。
WebViewの一覧のリンクが表示され、それをクリックするとWebInspectorが利用できます。

■最後に

上記でご紹介した方法はいずれもデバッグ用ですので、
リリースアプリに組み込んだままにならないようご注意ください。

PHPDocumentorの利用方法まとめ

笹亀弘 — Thu, 19 Jan 2012 13:21:00 +0900

皆さん、こんにちは。笹亀です。

新年、最初のブログになりました。
2012年も張り切っていきたいと思います。

本日は最近よくお世話になっているPHPDocについて書きたいと思います。
PHPDocとはjavadocを利用したことがあるかたならご存知かと思いますが、APIドキュメントを自動生成する便利なツールです。基本的な出力はHTMLで行い、APIのドキュメントとしてよく利用されるものです。

現在はPHPDocではなく、PHPDocumentorとしてPEARパッケージにて提供がされております。インストールもPEARコマンドから簡単にインストールできます。

pear install --alldeps phpdocumentor

インストール後はphpdocコマンドが使用可能になります。とりあえずテストにDoctrineをPHPDoc化してみたいと思います。
※下記は自分の環境にての実行となります（phpdocコマンドがある箇所から実行してください

sasa-no-MacBook-Pro:Desktop sasa$ /opt/local/bin/phpdoc -t ./doctest/doc -d ./doctest/Doctrine/ -o HTML:Smarty:PHP
-t: DOCの出力先
-d:DOCにする対象フォルダ
-o:出力形式の指定

コマンド実行中にWaringとか結構でたりしますが、うまいことそれなりに作成をしてくれます。

ただ、個人的にデフォルトのものだとデザインがいけてないです。そこでデザインにもこだわりたいというあなたへPHPDocumentorはSmartyを利用しているので、出力するテンプレートを簡単に切り替えができます。
下記に綺麗なデザインのテンプレートを作成したものがございます。
http://www.onigoetz.ch/2010/09/11/new-theme-for-phpdocumentor/

ダウンロードからテンプレートを落とし、ダウンロードしたファイルを適当な箇所で解凍します。
解凍したファイルを下記のPHPDocmentorが格納されている箇所にコピーします。

sasa-no-MacBook-Pro:~ sasa$ ls -al /opt/local/lib/php/PhpDocumentor/phpDocumentor/Converters/HTML/Smarty/Evolve/
HTMLSmartyEvolveConverter.inc templates/
sasa-no-MacBook-Pro:~ sasa$ ls -al /opt/local/lib/php/data/PhpDocumentor/phpDocumentor/Converters/HTML/Smarty/Evolve/
HTMLSmartyEvolveConverter.inc templates/

設置作業が完了しましたら、設置したテンプレートにてDoctrineをPHPDoc化してみたいと思います。
※下記は自分の環境にての実行となります（phpdocコマンドがある箇所から実行してください

sasa-no-MacBook-Pro:Desktop sasa$ /opt/local/bin/phpdoc -t ./doctest/docEvolve -d ./doctest/Doctrine/ -o HTML:Smarty/Evolve:default -s on

下記のようにデザインが綺麗なものでPHPDocとして出力されます。デザインにもこだわったPHPDocを出力することで一歩先のクオリティを目指すこともできますｗ

--------------------------補足情報
PHPDocumentorにて日本語を出力する場合は、文字化け問題にぶつかると思います。
HTML化する際にSmartyのテンプレートを使用しておりまして、テンプレートに直書きで「charset=iso-8859-1」などと記載されております。
下記の箇所にデフォルトのテンプレートが格納されており、ここに入っているheader.tplで指定されている文字コードを変更するとデフォルトの出力する際の文字コードを変更できます。

※自分の環境の場合
/opt/local/lib/php/data/PhpDocumentor/phpDocumentor/Converters/HTML/frames/templates/default/templates/
PEARが入っている箇所のdataフォルダ以下に格納されています
☓/opt/local/lib/php/PhpDocumentor/phpDocumentor/（こっちには格納されてません
下記のサイトが参考になるかと思います
http://wikiwiki.jp/yonkoushi2/?PHP%2Fphpdocumentor%A4%CB%A4%C4%A4%A4%A4%C6

自分で書き換えるのが面倒って方はバッチをつくっている方もいらっしゃるようで、下記サイトを参考に行うのもありだと思います。
http://hiluckyman.blogspot.com/2010/09/phpdocumentor-utf-8.html

設定や文字コードの調整が大変ですが、1度設定をしてしまえば今後も同じように使用することができますので、
PHPDocumentorで自分のAPIを開発者にAPIドキュメントとして提供をしてみてはいかがでしょうか。

下記のサイト様の情報を参考にさせていただきました。
この場をお借り致しまして、お礼を申し上げさせていただきます。ありがとうございました。
http://hiluckyman.blogspot.com/2010/09/phpdocumentor-utf-8.html
http://wikiwiki.jp/yonkoushi2/?PHP%2Fphpdocumentor%A4%CB%A4%C4%A4%A4%A4%C6

Google Chart Toolsを使ってサイトマップを描こう！

志田仁美 — Wed, 21 Dec 2011 13:03:11 +0900

こんにちは！最近寒いですが、みなさんいかがお過ごしでしょうか。
クリスマスも近いということで、クリスマスツリー→ツリー→組織ツリー→組織図！エンジニアのクリスマスはツリーですね！
今回は、Org Chartを使ってサイトマップを描いてみたいと思います。

1. Google Chart Toolsって？

Googleが提供している、グラフや表を簡単に作成するAPIです。（Google Chart Tools）
チャートギャラリーには、様々なグラフがギャラリー形式で並んでいます。
中には、メーターや世界地図、札束積み上げグラフ（？）など、ユニークなグラフもあります。
Code Playgroundでは、実際にコードを書いて即時実行しながら、様々なチャートで遊ぶことができます。

今回は、この中からOrg Chart（組織図）を使って、サイトマップを描いてみます。

2. サイトマップの作成

Org Chartでは、こんなかんじでサイトマップが描けます。

どんなコードかというと、こちら！

type='text/javascript' src='https://www.google.com/jsapi'>
type='text/javascript'>
var chart;
// visualizationを読み込む
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
// チャートの設定と描画
function drawChart() {
var data = new google.visualization.DataTable(); // ---(1-1)
data.addColumn('string', 'Name'); // ---(1-2)
data.addColumn('string', 'Parent'); // ---(1-3)
data.addColumn('string', 'ToolTip'); // ---(1-4)
// ---(2)
data.addRows([
[{v:'top', f:'トップページ'}, '', 'tooltip'], // ---(3)
[{v:'company', f:'会社紹介'}, 'top', ''],
[{v:'company-index', f:'ご挨拶'}, 'company', ''],
[{v:'about', f:'会社概要'}, 'company', ''],
[{v:'system', f:'Webシステム構築'}, 'top', ''],
[{v:'school', f:'PHPスクール'}, 'top', ''],
[{v:'course', f:'各コースの概要と紹介'}, 'school', ''],
[{v:'course1', f:'PHP基礎編'}, 'course', ''],
[{v:'course2', f:'PHP中級実務編'}, 'course', ''],
[{v:'orientation', f:'講座説明会（無料）のご案内'}, 'school', ''],
[{v:'business', f:'製品/サービス'}, 'top', ''],
[{v:'phppro', f:'PHPプロ！'}, 'business', ''],
[{v:'phpbiz', f:'PHPbiz'}, 'business', ''],
]);
// (4)
chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true,} );
}
id='chart_div'>

上記のコードが基本形です。まず、(1)についてご説明します。
(1-1)では、DataTableのインスタンスを作成します。
(1-2)〜(1-4)では、そのDataTableにカラムを3つ追加しています。
(1-4)でツールチップカラムを追加すると、そのノード（青いボックス）にマウスを合わせた時、ぺろっとツールチップが表示され、そこに表示する文字列を設定することができます。
データベースでいうと、addColumnでカラムを作るというイメージです。

var data = new google.visualization.DataTable(); // インスタンス作成
data.addColumn('string', 'Name'); // はじめのカラム：ノードの名前
data.addColumn('string', 'Parent'); // 次のカラム：親ノードの名前
data.addColumn('string', 'ToolTip'); // 最後のカラム：ツールチップ

つまり、ノードと親ノードだけ最低でも設定すればよく、ツールチップは付加的なものということです。

次に、(2)でデータを追加していきます。
data.addRowsは、データベースでいうINSERTに近いイメージです。今回のソースでは、ノードの親子関係がわかりやすいようインデントをつけました。

(3)では、実際にデータを定義しています。
はじめの要素であるノードの名前をキーと値の配列にすることで、データのIDと表面に出る文字列を別々に定義できます。
2つめのParentカラムを空文字にすることで、親ノードがないもの（ルートノード）を定義できます。
3つめのToolTipには、マウスを合わせた際のツールチップで表示する文字列を定義します。

[{v:'top', f:'トップページ'}, '', 'tooltip'], // ルートノード：一意なキーはtop, 表示するのは「トップページ」
[{v:'company', f:'会社紹介'}, 'top', ''], // キーcompany、「会社紹介」というノードは、親のキーが「top」

こうして、ノードにNameを振り、親ノードのNameをParentに指定していくことで、どんどんツリーをぶら下げていくことができます。
キーと表示する文字列が同じ場合は、下記のように簡単に書けます。

['top' '', 'tooltip'], // ルートノード：キーはtopで、表示もtopとなる。
['company', 'top', ''], // キーはcompanyで、親のキーはtop

最後に、(4)で、ドキュメント内のchar_divというDIVに、チャートを書き込みます。
描かれたOrg ChartはHTMLのTable要素で書かれています。

chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true,} );

これで、基本的なOrgChartを描くことができます！

3. もっと！Org Chart

これまでの説明では、Org Chartの基本的な部分について触れました。
ここからは、もっとOrgChartを豊かにするためのオプションについてご説明します。

CSSでデザインを変えたい

CSSでまとめてデザイン変更したいですね？調べておきました。

.google-visualization-orgchart-node
ノードに付いている基本的なクラス
.google-visualization-orgchart-node-medium
後述する、ノードの大きさによるクラス。
small, medium, largeがあるので、末尾を変えてください。
.google-visualization-orgchart-nodesel
ノードをクリックしたときに適用されるクラス。

ノードのスタイルを変更したい

ノード全体のスタイルならばCSSで変更できますが、このノードだけ変更したい！ということはないでしょうか。
例えば、ルートノードだけピンクにしたい…とか。
そういった場合、クラスはどれも同じなため、CSSで「このノードだけ」「こうしたい」と変更するのはなかなか難しいですね。

これで、ノードを指定してスタイルを変更できます！

data.setRowProperty(2, 'style', 'background:#ffe5ff;border-color:#ff8989;');
data.setRowProperty(1, 'selectedStyle', 'background:#FF0000;');

第1引数は、ノードの番号です。これは、addRowsされた順番に0から振られている番号です。
つまり、先ほどのコードでいうと、0は「トップページ」、1は「会社紹介」、2は「ご挨拶」というような指定の方法です。

第2引数は「style」か、「selectedStyle」を指定します。
style はそのノードのスタイル、selectedStyleはクリックしたときのスタイルです。

第3引数には、インラインスタイルを入れてください。

このsetRowPropertyは、addRowsからdrawの間に入れてください。
データを定義する→データにスタイルを適用する→チャートを描くという流れだからです。

drawするときのプロパティを指定したい

drawするときに、プロパティを指定することができます。

chart.draw(data, {
allowHtml: true, // ノードのHTMLを許可するか。Default=false
size: 'medium', // セルの大きさ。Default='medium'
allowCollapse: false, // ダブルクリックしてどうなるか。Default=false
nodeClass: 'asial', // ノードのクラス名
selectedNodeClass: 'asial' // クリックされたとき（Selected）のクラス名
});

allowHtmlは、ノードの表示する文字列内にHTMLを含めてもよいか設定する項目です。
デフォルトはfalse（許可しない）ですが、trueにすると以下のように、HTMLを含めることができます。

[{v:'top', f:' style="color: #FF0000;">トップページ'}, '', 'tooltip'],

sizeは、ノードのサイズです。small, medium, largeから選ぶことができます。デフォルトはmediumです。
ここで選択したノードのサイズが、クラス名としてTD要素に適用されます。（.google-visualization-orgchart-node-mediumなど）

allowCollapseは、ノードをダブルクリックしたときに表示・非表示アクションをさせるかどうか設定する項目です。
デフォルトはfalse（常に表示）で、ノードは全部展開されています。
trueにすると、子ノードがあるノードをダブルクリックしたときに、子ノードを隠すようなアクションをします。
もう一度ノードをダブルクリックすると子ノードを展開します。

nodeClassは、各ノードのクラス名です。
デフォルトのクラス名でなく、独自のクラスが使いたいときに利用します。
同様に、selectedNodeClassも、クリックされたときのクラス名となります。

おわりに

この他にもOrg Chartでは、イベントの取得や様々なメソッドなどが提供されています。
Chart ToolsにはOrg Chart以外にも魅力的なチャートがたくさんありますから、ぜひ使ってみてください！

stumpwm設定v2

門脇優児 — Mon, 19 Dec 2011 19:39:22 +0900

stumpwmって便利ですよね！

なんじゃそりゃ？という方は、"stumpwm"とか"タイル型ウィンドウマネージャ"でググってください。
簡単に言えば、GNU Screenのようなイメージでウィンドウを切り替えることができるので、ウィンドウの配置に関してはマウスを一切使わない硬派なウィンドウマネージャ(WM)です。
普段からウィンドウを最大化して使うか、上下左右に並べて配置して使う人の場合、マウスでちまちま並べる労力を削減出来れば効率が上がるはずです。
そんな人にはタイル型WMをおすすめ致します。

前置きはこのくらいにして、今回は自分が設定したstumpwmをちょっと便利にする方法２つを紹介致します。
１・tmuxを組み合わせて起動するターミナルをひとつだけにする
２・グループごとに壁紙を変更

１・tmuxを組み合わせて起動するターミナルをひとつだけにする

tmuxとは、GNU Screenのようなターミナルマルチプレクサです。
余談:Screenとの違いはありますが、個人的には下記が便利なので乗り換えました。
・Screenの縦分割程遅くならない
・分割機能が便利

本題。
しばらく作業しているとターミナルが増えていきます。
その上、他のブラウザとかlibreofficeなども起動しているとわけわからなくなります。
グループのグループ化してターミナルだけまとめて表示できないかと考えたところ、普通にtmux使えばいいという結論に達しました。

仕様は、
・各グループごとにtmuxを起動
・起動していればフォーカスを当てる
・起動していなければ起動する

実装についてですが、stumpwmにはrun-or-raiseという便利な関数があり、タイトルなどで起動しているか判定して無ければ起動、あればフォーカスをあてることができます。
なんと便利なことでしょう。

ということで、下記コードです。

/usr/local/bin/utmux 作成

#!/bin/bash
PRX="PRX_`stumpish groups| grep -o '\*.\+'| cut -c 2-`"
stumpish eval '(run-or-raise "urxvt -T '$PRX' -e tmux new-session -s '$PRX'" '"'"'(:title "'$PRX'"))'

~/.stumpwmrc 追記

(defcommand urxvt () () (run-shell-command "utmux"))

なんでbash使っているかって？CLで実装しようと思ったが間に合わなかったのさHAHAHA！
ということで許してください。CLを触ったことが無かったので、CLだけだとうまくグループのIDが取れませんでした。

PRX=の行は、力技でグループ名を取得。
urxvtは -T でタイトルを指定し、-e でその後に書いたコマンドを実行。
tmuxは、new-sessionで新規セッション、-sでセッション名を指定。
run-or-raiseの第二引数で、判定に使用する値(今回はタイトル)を指定。

このコードを使う場合には、stumpwmを落としてもいい覚悟で使用してください。
自分の環境だけかもしれませんが、起動したウィンドウが一瞬で消えるとstumpwmがフリーズするので注意。

２・グループごとに壁紙を変更

グループ機能は便利ですよね！
複数のウィンドウをまとめることができる機能で、人によっては捉え方は色々とあるかとは思いますが、自分は"タブ"のようなものと考え、各機能ごとにグループを作成しています。

例えば、普段は、メーラ、rdesctop、audacious、そして作業中のターミナルやemacsなど用のグループを作成し、各グループにショートカットキーを割り当てて、一発で切り替えられるようにしてあります。
M-F1 -> メーラ
M-F3 -> rdesktop
M-F5 -> audacious
Prefix-1〜9 -> ターミナル用

これだけでも便利ですが、もうひと工夫。
ターミナル(urxvt)は背景透過を設定して、各ターミナル用グループで壁紙を変えています。

壁紙変えるだけなら、時間ごとに変えてくれるアプリケーション使えばいいじゃないかと思われるかもしれませんが、実はこちらの方が実用的です。
例えば、各グループでそれぞれ違うサーバに接続していたとします。
壁紙が違えばパッと見どのサーバにつながっているのかすぐに解ります。
もちろん、ターミナルのサーバ名は表示していますが、文字を読むより絵で見たほうが直感的に一目瞭然で、作業ミスを減らすことができます。たぶん。
まさに一石二鳥。

長々と語りましたが、実際の設定方法は下記になります。

~/.stumpwmrc 追記

(defun gselectw (num img) () (progn (if img (run-shell-command (concatenate 'string "fbsetbg -t '" img "'")) (run-shell-command "fbsetbg -t '/path/to/dir/default.jpg'")) (run-commands (concatenate 'string "gselect " num))))
(defcommand gselect1 () () (gselectw "1" "/path/to/dir/01.jpg"))
(defcommand gselect2 () () (gselectw "2" nli))
(define-key *root-map* (kbd "1") "gselect1")
(define-key *root-map* (kbd "2") "gselect2")

要は、gselectw第二引数のパスがあればその画像、無ければdefault.jpgを設定しています。
define-keyとgselectの行を増やしていけば次々設定できます。
なお、fbsetbgを使用しているのは、xsetbgとかdisplayだとうまく切り替わらなかったので。

おまけ

この一件でCL触ってますが、触っているうちに少し楽しくなって来ました。
でも、CLどころかLISPってstumpwmかemacsしか使っていないので、自分の場合はそれ以外の使い所が無いですね。
今やっている案件に・・・いや、ただの嫌がらせにしかならない。

こうやって見ると書いたプログラムは大したことは無いですね。
ですが、少しのコードを書くだけで割と便利になります。

stumpwmに限らず、自分のPCは長く触る環境です。
もし時間が確保できて気が向けば、他のアプリケーションも細かいところをカスタマイズしてみてはいかがでしょうか。

Mashup Awards 7の授賞式が行われました

中川善樹 — Fri, 16 Dec 2011 10:59:42 +0900

こんにちは、アシアルの中川です。

先日、Mashup Awards 7 の授賞式が行われ、
アシアルも協力企業として参加させていただきました。
年々規模も拡大されており、今回は500作品を超える応募があったようです。

今回アシアルからは、 HTML2PDF と、
JSChart のWebサービスAPIを提供させていただきました。

アシアルAPIを利用した作品は、以下にてご確認いただけます。
・http://ma7.mashupaward.jp/works/api/2?locale=ja
・http://ma7.mashupaward.jp/works/api/3?locale=ja

アシアルAPIをご利用いただきまして誠にありがとうございます。

上記作品の中から協力企業アシアル賞としまして、
「まちみえーる」( http://ma7.mashupaward.jp/works/162 )
を選考させていただきました。

作品説明より

「まちみえーる」は順番待ちシステムです。
病院などで順番を待つのはつらいものです。
そのつらさをクラウドを利用して軽減したいという思いで開発しました。
病院へ向かう人は2種類に分けられます。具合が悪くてすぐに診てもらいたい人、
予防注射などで、それほど急がない人です。
それほど急がない人が、待ち状況を見て空いている曜日に移動してくれたら、
すぐに診てもらいたい人の待ち時間も少なくなります。
「待ち時間が分かることで幸せになる人を増やしたい。」
それが「まちみえーる」の思いです。
空いている曜日を探す機能にはグラフを用いて直感的に判断できるようにしました。

選考理由・コメント

利用者としては、あると大変うれしいサービスですね！
こういったサービスがもっとたくさんの施設で提供されるようになると便利だと思いました。

副賞

副賞としまして、Monacaモナカをお送りさせていただきました。
※Monacaとはアシアルが開発・提供する「スマートフォン向けのアプリケーションを開発するためのクラウドサービス」です。

今後とも何卒よろしくお願い致します。

社員旅行に行きました

大橋寛子 — Mon, 12 Dec 2011 00:24:47 +0900

こんにちは。大橋です。

アシアルでは先週末に社員旅行に行ってきました！

まずは志賀高原へ行き、スキー＆スノーボードをしました。

雪質はあまり良いとは言えませんでしたが、天気も良く、気持ちよく滑ることができました。

そして、疲れた体を奮い立たせ、夕食は、みんなで鍋を作りました。

カレー鍋、もつ鍋、カキ鍋とどれもとてもおいしくいただきました！

次は闇鍋にチャレンジしたいですねｗ

２日目は、特に予定を決めていなかったので、とりあえず「大久保の茶屋」というお蕎麦屋さんへ！

やっぱり信州そばはおいしいですね！

続いて「鬼押し出し園」へ向かいました。

道中の鬼押しハイウェイからの景色は絶景でした！

鬼押し出し園に到着し、浅間山噴火によって生まれた、溶岩を見物しながらみんなでのんびり散策。

とっても寒かったですが、景色は最高でした。

最後に「白糸の滝」へ行きました。

なんだか女神が現れそうな滝でした。。。

最近は何かとバタバタしていたので、みんなでのんびり旅行出来てよかったなーと思いました！

来年も楽しみです。

iCloud風のアイコンを作成する（Fireworks）

和田記光 — Wed, 07 Dec 2011 21:43:03 +0900

こんにちは。和田です。

今回はiCloud風のアイコンをFireworksで作成したいと思います。
オブジェクトは３つだけで作成できるのでとても簡単です。

それでは作成したいと思います。
まず始めに700×700pxの新規ファイルを作成します。

そして、

1.土台?となる部分の矩形を作成します。
　・サイズ：512×512px
　・丸み：94px
　・塗り：線形グラデーション
　　→グラデーションの値（番号は下記の画像に記載している番号を表しています。）
　　　(1) #DDDDDD
　　　(2) #89898B
　　　(3) #545456

2.次にステンレスのようなヘアライン効果のオブジェクトを作成します。

2-1.円の矩形を作成します。大きさは、「1」で作成したものより大きく作成します。
　　大きく作成するのは、この後で設定するフィルタ（ぼかし（放射状））の効果を奇麗に反映させる為です。

　・サイズ：646×646px
　・塗り：円錐グラデーション
　　→グラデーションの値
　　　(1) #E7E7E7
　　　(2) #B3B3B6
　　　(3) #9C9A9E
　　　(4) #F2F2F2
　　　(5) #F2F2F2
　　　(6) #9C9A9E
　　　(7) #F2F2F2
　　　(8) #F2F2F2
　　　(9) #9C9A9E
　　　(10) #9C9A9E
　　　(11) #F2F2F2
　　　(12) #F2F2F2
　　　(13) #9C9A9E
　　　(14) #9C9A9E
　　　(15) #C1C1C4
　　　(16) #C1C1C4

2-2.ヘアラインの効果を作成する為にノイズとぼかしを設定します。

　・ノイズを追加：適用料：10
　・ぼかし（放射状）：
　　　適用量：30
　　　画質：100

ノイズがかかったイメージ

ぼかし（放射状）がかかったイメージ

2-3.「1」で作成したものより小さい矩形を作成してマスクをかけます。
　　小さくすることでエンボスがかかったように見せる事が出来ます。
　　・サイズ
　　　幅：502px
　　　高さ：502px
　　　丸み：90px

こんな感じになります。
大分それらしくなってきました。

3.イラストの作成
3-1.アイコンの背景が出来ましたので、上に載せるイラストを矩形で作成します。
　・塗り：#78787D

3-2.ここで、雲のイラストで色が塗られている部分に
　　下地のヘアライン効果を反映させ、黒光りしたイメージにしたいので、描画モードを「焼き込み（カラー反転）」に変換します。

3-3.そして、イラスト部分を凹んだイメージにする為、下記のフィルターを設定します。

　(1)ベベルとエンボス（Photoshopライブエフェクト）

　　　構造--------------------------------------
　　　　スタイル：ベベル（外側）深さ=200
　　　　テクニック：スムーズ：サイズ=4
　　　　方向：ダウン：ソフト=0

　　　陰影--------------------------------------
　　　　角度：90度
　　　　ハイライト：スクリーン（#FFFFFF）：100
　　　　シャドウ：乗算（#000000）：60

　(2)シャドウ内側
　　　距離：5
　　　不透明度：100%
　　　ぼかし：2
　　　角度：315度

これで出来上がりです。
いかがでしょうか？
ちなみにいくつかバリエーションを作ってみました。

今回も簡単なので
皆様も是非作ってみて下さい。

iScroll4でネイティブに近いスマホ向けHTMLページを作成する

松田惇 — Fri, 02 Dec 2011 15:17:08 +0900

こんにちは。松田です。
スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。
特にiOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないため、iOS4でCSSのみでヘッダーを固定することが難しくなっています。
そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。

http://cubiq.org/iscroll-4
上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。
examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。
特に使えそうなのが、lite、pull-to-refresh、carousel、あたりです。
liteは最も簡略化した使い方のサンプル、pull-to-refreshは表示したリストが上限まで達した際に次のリストを動的に読みこませるサンプル、carouselはページ単位で横スクロールを実装できるサンプルになっています。

lite

pull-to-refresh

carousel

liteのソースコードを見ればわかりますが、基本的な使い方は簡単で、サンプルをコピペすれば簡単に作れてしまいます。
基本的なhtmlの構造はこんなかんじです。

<div id="wrapper">
<ul>
<li>row1li>
<li>row2li>
<li>row3li>
...
ul>
div>

これで以下のようにスクリプトを実行させます。

var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

DOMの読み込み完了後でないとiScrollが実行できないため、DOMContentLoadedイベント発生後にnewされるようになっています。
また、タッチ時に余計な動きを起こさないようにtouchmoveイベント発生時のデフォルトの動作をキャンセルさせています。
これにサンプルのソースのcssをコピペすれば完成です。
ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。
ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。

さらに複雑な処理を指せる場合はiScrollのコンストラクタ第2引数で色々なオプションをつけることができるので、何か特殊な操作をさせたい場合は近い動作をするサンプルのソースを見てみるか、公式ページでオプションを確認してみると良いかもしれません。

スマホ向けのページを作るにはとても便利なので、ぜひ一度試してみてはいかがでしょうか。