月別アーカイブ: 2012年8月

WordPressでHighSlideを使う

画像サムネイルをクリックしたときに、画面遷移せずに元のサイズの画像を表示させたほうが使い勝手がいいです。

HighSlide JSとは

そのためのJavaScriptプラグインで、HighSlide JSというのを気に入って使っています。

HighSlideはドラッグ可能な画面の拡大ダイアログ、キャプション、キーボードによるナビゲーションなどをサポートした高機能なサムネイル・ギャラリーを作成できるjavaScriptライブラリです。

画像にキャプションをつけられること、画面にあわせた拡大画像を表示してくれるところが優れています。今でも開発が続けられており、以前に較べると導入しやすくなりました。

ライセンスがちょっと微妙なのですが個人ではフリーライセンスなものの、収益のある宣伝サイト、政府系サイト、WEBアプリケーションでは有料のコマーシャルライセンスの取得を求めています。

個人ブログのWordPressへの組み込みは無料でしかもプラグインを入れるだけという簡単さなので、おすすめです。

WordPressにHighSildeを組み込むプラグイン

実際にWordPressでHighSlideを使うにはHighSlideの公式サイトで紹介されていた「Highslide Integration in WordPress」が良かったので紹介します。

他のプラグイン同様、ダウンロードしてwp-contentのPluginsフォルダに入れてください。後は管理画面でプラグインを有効化するだけです。

後は普通にWordPressのメディアライブラリからサムネイル画像を投稿に挿入するだけでHighSlideの機能を使って表示されます。
HighSlide本体をダウンロードしたり、アップロードしたディレクトリに合わせて設定ファイルを書き換える手間もありません。カンタン!
[html]
<a href="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002.png">
<img src="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002-150×150.png" alt="" title="render_002" width="150" height="150" class="alignnone size-thumbnail wp-image-136" />
</a>
[/html]
WordPressで画像を入れたときのHTMLのコードは上のような単純なリンク付のサムネイル画像です。しかしちゃんとHighSlideで開きます。
画像を開くとキーボードのカーソルキーを使った操作が有効になります。

カスタマイズ

WordPressの設定に「HighSlide Integration」ができていますので、ここで設定ファイルを編集できます。
とりあえずコントロールボタンは不要でしたのでuseControlsをtrueからfalseに変えておきました。
[javascript]
// HIDE CREDITS
hs.showCredits = false;

// SHOW IMAGE TITLES AS CAPTIONS
//hs.captionEval = ‘this.thumb.title’;
//hs.captionOverlay.position = ‘below’;
hs.headingEval = ‘this.thumb.title’;

// DROP SHADOW
hs.outlineType = ‘rounded-white’;

// USE GRAPHICAL EFFECTS
hs.transitions = [‘expand’, ‘crossfade’];
hs.fadeInOut = true;
hs.expandDuration = 150;
hs.restoreDuration = 150;

// SHOW SLIDESHOW CONTROLBAR
hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: false,
fixedControls: ‘fit’,
overlayOptions: {
className: ‘large-dark’,
opacity: ‘0.75’,
position: ‘bottom center’,
offsetX: ‘0’,
offsetY: ‘-25’,
hideOnMouseOut: true
}
});

// DIMM WEBSITE WHEN IMAGE IS OPEN
// hs.dimmingOpacity = 0.75;

// SHOW CLOSE-BUTTON
// hs.registerOverlay({
// html: ‘<div class="closebutton" onclick="return hs.close(this)"></div>’,
// position: ‘top right’,
// fade: 2
// });
[/javascript]

HighSlideのプロパティの詳細についてもっと知りたい人はHighslide JS API Reference(英語)がありますがHighslide Editorでデザインを変えてみたほうが分かりやすいかもしれません。

キャプションやヘッダを表示するにはhighslide-captionクラスのspanを加える方法(改行OK)、他にaタグのtitle、または画像のtitle,alt属性を設定によってキャプションまたはヘッダにする方法(改行できない)があります。
WordPressのcaptionタグとは別物ですので注意してください。

キャプションの表示がうまくいかなかった

今回テストしたのではキャプションの文字がボーダーの外にでてしまう問題がありました。
これが解決できるといいのですが回避する方法があるかもしれません。

特に手間も無くサムネイル画像の使い勝手が向上することを考えると、サムネイル画像しか使わないといったブログでも導入しない手はないでしょう。

【自作ツール】超軽量のPHPブログシステム『LiteBlog』

超軽量なブログシステムを作りたいと思って作ったのがLiteBlogです。
軽量というのは動作が早い、ということはもちろんですが「さくっ」と作って「さくっ」と運用できる、ということに重点を置いており、データベースはPHP5に標準でついていたsqliteにしました。

手軽にバックアップ

sqliteのデータベースは単一のファイルですので、MySQLなど普通のデータベースと違いバックアップもフォルダをコピーするだけで済みます。
フォルダをPHPの動くサーバーに移せばすぐ運用開始できる、というのがウリです。

丸パクリで工数削減

作ったのは2008年ごろ、会社は辞めたけどまだ受注仕事を始めていなかったので腕が落ちないよう、短期間で作ることを目標にし、Livedoorブログ(!)を完全にパクリ(!!)ました。
その結果、わずか2週間で完成。RSSやトラックバックの仕様を調べるのに半分くらいかかってるので投稿システムやプラグインシステムなどはわずか1週間。これは、Livedoorブログがいかにすぐれたシステムであったか、ブログというシステムが既にこなれた存在だったからこそだと思います。

SEO対策はgoogleに聞くと早い

SEO対策はGoogleのウェブマスターガイドラインを踏襲するよう作ったのでばっちり。作ったばかりのブログが「三瓶町」ワードでGoogle検索で3位以内にきたのには驚きました。

その後、コーポレートサイトなど企業・個人のクライアントの方で数年間、運用させていただきました。

運用の苦労

作った期間は短かったのですが、運用中はスパムに悩まされました。ロシアからのスパムボムでサーバーが応答不能になったことが何回かありました。

恥ずかしながら当時はなかなか原因が分からず、正月に嫁の実家にいるとき一回サーバーがダウンしたのですがその時は再発しなかったのでそのままにしてしまい、地元の消防団に入っているものでその旅行中に再びサーバーがダウンし不眠不休で原因究明にあたっていたことを思い出します。

RSSがリーダーに反映されないときがあるとか、やっぱり実際の運用は手間がかかるもんです。

それにしてもなんで、家にいないときに限ってサーバーって落ちるんですかね。。。

今では

WordPressの方が高機能になっているので使わなくなりました。

【HTML5】kineticJSを使ったHEX描画

この前の投稿ではcanvasで描画したHEXのソースは載せましたがkineticJSのほうは載せてなかったのでここに載せときます。

これが実際にkineticJSで描画された六角形です。
jsdo.itにあげようとしたらうまくいかなかったのでこの記事の終わりにJavaScriptが入るようWordPressをカスタマイズしました。ソースで確認すればscriptがみえます。
赤丸を移動できます。まだそれだけ。

kineticJSの説明をみるとレイヤやグループに分けることで高速化を図る仕組みを持ってるようにみえるので、そのやり方を探っています。

【PHPStotm】FTPのアップロード・同期化の設定

PHP開発環境統合エディタのPhpStorm、とってもいいですね!JavaScriptの開発にもPHPの開発にも重宝しています。
今までEclipseNetBeansなどのIDEは重すぎる割りに使いこなすのが難しく使えていなかったのですがPHPStormはストレスを感じることなく使えています。
日本語化がされていない、有料ソフト、といった事で躊躇もありましたが今年の買って良かったNo.1ですよ。

気に入っているのはFTP/SFTPを使ったファイルアップ機能です。
自分は開発中に実際のサーバーにアップロードしながら確認するタイプなので、編集即FTPアップロードは自分にとっては必須です。
PHPStormは自動でアップロードしてしかも最新ファイルを上書きしないようにできるのです。

リモートサーバーの設定

まずプロジェクトを作ったらToolsメニューからDeproyment>Configuration…を選び、FTPの設定をしましょう。
この辺はいろんなところで書かれてあるので割愛。こことか。
ポイントはMappingタブでドキュメントルート以下を扱う場合でもしっかりサーバーのドキュメントルートとWEBルートに”/”を入れておくこと。
Mappingを指定しておかないと同期化できません。

一番右のRemoteHostをクリックするかTools>Deployment>Browse Remote Hostでサーバー上のファイルが見えるようになっていればまずはFTPの設定はOK。

Automatic Uploadの設定

次にファイル編集を保存すると同時にFTPにアップロードされるようにします。
ToolsメニューからDeproyment>Automatic Uploadにチェックを入れるだけです。

ファイルを保存するとFTPのログにアップロードされたと出てきます。もしファイルパーミッションなどで失敗していればちゃんとログで分かるのでチェックしてみてください。

2014年6月14日追記:

PHPStormは保存せずに終了したとき、一定時間操作しなかった時など自動でファイルを保存します。そのため、予期しないタイミングでサーバーにアップロードされることがありますので場合によってはAutomatic Uploadを有効にしない方がいい時もあります。

2014年10月6日追記:

PHPStormから別のアプリケーションに切り替えた時にも自動でセーブされるようです。だから意図していない時によくあがってしまうんですね。Deproyment>Options…のUpload changed files automatically to the default serverをAlwaysにしていればセーブと同時に常にアップロードも行われますがOn explicit save actionにしていれば明示的にセーブした時だけ、Neverにすればアップロードは行われません。
感覚的にはセーブした時だけアップロードするのが良さそうなのですが、後で説明するPHPStorm以外のアプリで作ったファイルの同期がセーブしたタイミングで行うようになるので、そっちの方はAlwaysの方が断然分かりやすいんですよね。
共同しているサーバーだとAutomaticUploadは使わず、自分だけのサーバーに常に同期する設定にして開発し、Gitなどで共同サーバーに反映させるのがいい気がします。

アップロード前に自動でチェック

自動でアップロードしていると、サーバー上のファイルが最新だった場合、上書きして消してしまうこともあります。

そこでToolsメニューからDeproyment>Options…を選び、ダイアログのWarin when uploading over newer file:を設定しましょう。
チェック種別を選んでNotyfy about remote changesにチェックを入れておきます。

これでFTP上のファイルと比較を行い何かが違っていたらダイアログでどうするか聞いてくるようになりました。

フォルダ以下を同期化する

ちなみにAutomatic Uploadを使っているとあまり使うことがないのですがファイル・フォルダ以下を同期化することもできます。
ローカルのプロジェクトのファイルやフォルダを右クリックしてDeproyment>Sync with Deployed to … を選択します。
比較のダイアログがでてきて、ローカルとリモートで差のあるファイルの一覧がでます。
しかも選択すればdiffの内容が分かりやすく表示され、どちらを残すかもファイルごとに選んで一括処理できるんです、すごい。
ただし、どちらかに無いファイルについては比較が行われないぽいです。

あれは出来ないのかな?

NetBeansだと、フォルダに画像ファイルを放り込んだだけで自動でFTPアップロードしてたんですけど、Phpstormでは出来ないのかな?まだ見つけられてません。

2014年6月14日追記:

ここみてたらありました。
[Preferences] – [Deployment] – [Options] – [Upload external changes]
で出来ました!ファインダーにファイルを放り込んだり、移動したりして数秒後にはちゃんとサーバーにも反映してます。超絶便利!

【HTML5】canvasとKineticJSで六角形を描画してみる

今日はcanvasを触ってみます

まずは単純にJavaScriptで描画した六角形のHEXタイルを並べてみました。うまくいけばHEXを使った戦術シミュレーションを作れるし、その手のゲームのアルゴリズムに興味があるので。(今日はそこまではいきませんでしたが)

ソースコードはこんな感じ。

[javascript] <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var View = function(){
this.initialize();
};
// 画面描画
View.prototype.draw_hex = function(hex_position){
var canvas = document.getElementById(‘screen’);
if ( ! canvas || ! canvas.getContext ) {return false;}
var ctx = canvas.getContext(‘2d’);

ctx.save();

// HEXの描画位置
ctx.translate(
this.hex_width*hex_position[0]+(hex_position[1]%2 ? this.hex_width*0.5 : 0),
this.hex_width*0.75*hex_position[1]
);

ctx.beginPath();
ctx.moveTo( 0, this.hex_height*0.25);
ctx.lineTo( 0, this.hex_height*0.75);
ctx.lineTo(this.hex_width*0.5, this.hex_height);
ctx.lineTo(this.hex_width, this.hex_height*0.75);
ctx.lineTo(this.hex_width, this.hex_height*0.25);
ctx.lineTo(this.hex_width*0.5, 0);
ctx.lineTo( 0, this.hex_height*0.25);
ctx.closePath();

var grad = ctx.createLinearGradient(0, 0, 0, this.hex_height);
grad.addColorStop(0,’rgb(64, 256, 256)’);
grad.addColorStop(1,’rgb(64, 194, 256)’);
ctx.fillStyle = grad;
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();

ctx.fillStyle = "blue";
ctx.font = "10px ‘MS ゴシック’";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.fillText(hex_position[0]+’,’+hex_position[1], this.hex_width/2, 6);

ctx.restore();
};
View.prototype.draw_character = function(param){
var canvas = document.getElementById(‘screen’);
if ( ! canvas || ! canvas.getContext ) {return false;}
var ctx = canvas.getContext(‘2d’);

ctx.beginPath();
var x = (param.pos[0] * this.hex_width) + (this.hex_width / 2) + (param.pos[1]%2 ? this.hex_width*0.5 : 0);
var y = (param.pos[1] * (this.hex_height * 0.75)) + (this.hex_height * 0.5);
ctx.arc(
x,
y,
10,
0/180*Math.PI,360/180*Math.PI);
ctx.stroke();
ctx.fillStyle = "rgb(224, 0, 0)";
ctx.fill();

ctx.fillStyle = "white";
ctx.font = "16px ‘MS ゴシック’";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.shadowBlur = 2;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(param.char, x, y);
};
View.prototype.initialize = function(){
this.hex_width = 32;
this.hex_height = 32;
var tile_width = 26;
var tile_height = 30;
for (var x = 0; x < tile_width; x++){
for (var y = 0; y < tile_height; y++){
this.draw_hex([x,y]);
}
}
var player = {char: ‘P’,pos : [1,5]};
this.draw_character(player);
};

// 描画開始
console.time(‘draw’);
var view = new View();
console.timeEnd(‘draw’);
};
</script>
<canvas id="screen" width="900" height="900"></canvas>
</body>
</html>[/javascript]

IE8では動きませんでした。

ここで大きな疑問が。
プレイヤーのキャラクター「P」を移動させるのに、マウスクリックイベントをどうやって受け取るか?

canvasだとDOM上ではcanvas要素ひとつだけなので、一番上のcanvasに対してクリックイベントをつけてやり、座標から何が押されたか調べる・・・?んなアホな・・・。
でもそういうやり方ぽいので他はどうしてるんだろうと思ったらcanvasを扱うゲーム向けのライブラリがいろいろあるようなのです。

KineticJSも触ってみます

なんだかドキュメントの充実してそうなKineticJSで書き直してみました。
APIが全然変わるので全面書き直し。でも基本は同じなのでソースコードは省略。

イベントはKinecticJSの書き方で
[javascript]var circle = new Kinetic.Circle({
x: x,
y: y,
radius: 10,
fill: "red",
stroke: "black",
strokeWidth: 1,
draggable: true
});
circle.on("mouseover mousedown mouseup", function() {
writeMessage(view.messageLayer, "Multi-event binding! ");
});
circle.on("mouseout", function() {
writeMessage(view.messageLayer, "");
});[/javascript]

といった感じで設定できるようになりました。

他にもマウスにあわせて動く指定がプロパティひとつで出来たり、レイヤーの概念ができて操作しやすかったりするようです。

これでばりばり動けばいいんですが

しかしやっぱりDOMではないのでjQueryが使えずやりづらい。
あと、なぜかテキストのalign:centerが効かなかった。

最初、六角形一つに対してレイヤを一つ割り当てて描画させるとブラウザがクラッシュする勢いだったんで全てを一つのレイヤにしたんですが、それでも素のcanvasが描画に56msかかるのに対して871msかかってました。
ちなみに六角形を26×30で780個並べたんですが、ドラッグ可能オブジェクトを置いたもののマウスの動きについてこれてないし、実際にゲームに使えるのかというと・・・

割と簡単なAPIなので、canvasにしろKineticJS使うにしろ単純なものにはいいと思うのですが、大量の描画になってくると速度が気になります。

一日使ってみただけで断定は出来ませんがcanvasは諦めてSVG+jQueryでやってみようかと思いました。

【blender】3Dモデリング練習

しばらく3Dソフトを触れていなかったので、リハビリのためにキーボードを作ってみました。

形状は複雑でないですがテクスチャのマッピングが大変!1時間くらいで作りたかったですが1日かかっちゃいましたよ。

操作の仕方を少しづつ思い出してきてるので、これからゲームなんか作りつつモデリングの経験を重ねていきたいなーと思ったりしています。

「東京物語」から幸せを学ぶ

日本の小津安二郎監督は海外から非常に評価の高い監督です。代表作「東京物語(1953)」が、オリンピックで沸くイギリスの映画協会が発光する「サイト・アンド・サウンド」誌で世界の映画監督三百五十八人が投票で決める最も優れた映画に選ばれたと報じました。

今まで観た事がなかったので、早速レンタル屋さんで借りてきてみたところ、非常に丁寧に作られており、これは深いな、と感じましたので初見しただけの生半可な知識で思ったところを書きます。それは、「幸せ」とは何かということです。

「幸せ」とは、何でしょう。お金持ちになって成功することでしょうか、結婚して家庭を築くことでしょうか。

映画の中で、こんなシーンがあります。

尾道の老夫婦(笠智衆・東山千栄子)がせっかく東京の息子・娘の家を遊びにきたというのに、開業医の息子と美容院経営の娘は「忙しい」とばかり言っていてまったく世話をすることができません。
娘にいたっては父母を熱海の安宿に行かせて予定より早く戻ってくると露骨に嫌な顔をする始末です。

夢を叶えて東京で店を持ったのに、いや、だからこそ、余裕なんてないのは良く分かります。

老夫婦を東京見物につれていってやり気持ちばかりとお小遣いまで渡すのは戦争で夫を亡くした義理の娘(原節子)でした。

彼女は一人でアパートに暮らし、仕事も当時の女性にしてはしっかり重要なポジションを任せられているようではありますが会社を休むこともできます。
開業医や美容師ではお店を閉めることになるのでこうはいきません。

東京で一番「ゆとり」があるのが会社員である義娘ということです。
義母に「次男の事は忘れて幸せになってくれ」と言われ、笑顔が強張る義娘の原節子、
さらに尾道でも義父に「あんたはええ人じゃ」と同じことを執拗に言われ「わたし、ずるいんです」と泣き出します。

その直前、義母の葬式が終わると仕事があると東京・大阪に帰ってしまう子供たちを非難する孫の京子に
「皆、自分の生活ができるの。なりたくないけど、私もああなるのよ」
と言ったところでした。

彼女の複雑な心理状態とその正直さにとまどう義父の場面はこの映画でもっとも印象深いシーンでした。

ゆとりのなさが人を変え、優しさをなくしたのだとすると、幸せは「ゆとり」でしょうか。
「ゆとり」という言葉に今でこそ良いイメージはありませんが、考えてもみてください、
音楽を楽しめることも、絵や映画を鑑賞することも、すべて生活のゆとりがあればこそです。金銭的な余裕、時間的な余裕、その2つが揃って幸せといいます。

もちろん、ゆとりを追い求めることだけが幸せな人生ではありません。
もう一つの尺度、「守るに足るべきものか」ということがあります。

仕事、家族。命をかけて守るに足るか、そうならば「やりがい」という満足をもたらします。
老父が東京で再開した友人と飲みながら友人は「息子は敢闘精神が足らない」と嘆き、老父は「もっとモノになってるかとおもっとった。しかし、ええほうじゃとおもわなきゃ、とおもった」。
どんだけ子に期待しているのか・・・・。親が子に求めているのはこっちなんですよね。

「やりがい」を求めれば「ゆとり」は失われるもの。だから「人生はいやなことばかり」。うーん、せつないですね。
世のお父さん、お母さんたち、いつか受け入れましょう、子供が子供でなくなることに。

【自作ツール】GIFファイルの中身を確認できるツール

絵文字を扱っているとgifを解析することが多かったので、PHPでGIF解析ツールを自作して使っていました。

GIF解析ツールGifAnalizr

GIFファイルは情報データ部分と画像バイナリデータとが分けて入っており、さらにアニメーションGIFの場合は情報データとバイナリデータが繰り返し入っています。それを分けて表示します。

バイナリ解析にあたってはとほほさんのGIFフォーマットの詳細が非常に分かりやすく助かりました。

GIFファイルってのはとても面白いもので、動いている部分だけをレイヤーを重ねるようにしてコマアニメを作っています。そうすることでファイル容量を節約しているんですね。

なので、このツールで単純にGIFアニメを分解すると

このアニメも

こんな風に必要な部分だけ書き換えられているのが分かるわけです。
ところでこれ何ですかね?イカ娘?適当に拾ってきたGIFアニメファイルなんでアニメは観た事ないんですが評判ですよね。

GIFファイルは滅び行くファイル形式だと思っている人も多いと思いますが、アニメーションに関しては、そのファイル圧縮効率の高さと、1コマの秒数など細かく指定できることを考えると、アニメーションGIFはまだまだ残っていく形式のように思います。

かすれた文字の作り方(Fireworks)

まずは左のメニューボックスからテキストツールを使って文字を打ち込みます。62ptくらいの大きめのサイズにして、フォントも線が太いものを選びます。

プロパティパネルの中で、背景色のボックスをクリックして

テクスチャをひっかき傷100%に変えます。

これだと前面に傷が入っているので、傷の入っている箇所を選択できるようにしたいと思います。
文字が選ばれている状態でクローン(Ctrl+Shift+d)をして、引っかき傷を0%、修正>選択範囲の結合をすることで文字の上にビットマップ化された単色の文字が乗っかったようになります。
あとは汚したい部分を消しゴムで上に乗った文字から消していくだけ!この時消しゴムの透明度は100%でなく50%くらいに下げたほうがリアルにできます。

私は車で壁をこすった時のことを思い出しながら直線的に汚れをつけていきましたが、雨で塗装が剥げた場合は上面を、長年使われている道具なら持ちやすそうな先端を、と想像しながら汚していきます。