refirio.org

主にfreoのメディア管理機能強化のために色々と調べていたけど、どれも自分の技術で実現可能っぽい。

具体的には、ブラウザ上で画像をトリミングしたり、縮小・反転・回転したり、画像に直接何か書いたり、サイズが違ってもレイアウトが崩れないようにグリッドで並べたり。

ブラウザ上で画像をトリミング

よくあるペイントツールみたいに、範囲を指定して切り抜き。以前に作ったもの。

画像を反転

ImageMagickなら命令一発で反転できる。GDには反転命令が無いみたいなので、ピクセル操作で反転。

画像を回転

ImageMagick・GDともに命令一発でできた。あと、画像の縦横比率を保持して縮小…は、普段から使っているので何も難しいことは無い。

画像をグレースケールに変換

ImageMagick・GDともに命令一発でできた。

ブラウザ上で直接描画

以前に作ったもの。画像に手書き文字を書き加えて上書き保存…を作るのも（手間はかかるかもだけど）多分難しくは無い。画像と手書き文字をJavaScriptで一枚の画像に合成するのは難しいかもだけど、サーバーサイドで合成すればいいし。

縦横比の異なる画像をグリッドで表示

もっと手こずるかと思ったけど、文字の水平位置を揃えないのなら特に難しいことは無かった。画像一覧は、基本的にこんな表示が良さそう。

縦横比の異なる画像をトリミングして表示

サイズの比率が違う画像とか大きい画像とか極端に小さい画像とかを、CSSでトリミング＆サイズ調整して一覧表示。こんな表示もアリかも。

Rubyをインストールした際のメモ。

Rubyのインストール

Rubyは色々なパッケージがあるけど RubyInstaller for Windows を使用。（他は試していないけど、多分どれでもいい。）

インストール方法は Windows で Ruby バージョン 1.8.7 あるいは 1.9.2 のインストール (RubyInstaller を使用) を参考にした。

その他メモ

もとからあるXAMPP環境にRubyを追加する。Rubyは C:\ruby にインストールした。

拡張子 .rb でRubyを実行させるため、apacheのconfファイルに AddHandler cgi-script .cgi .rb と書いておいた。

MySQLを使うために、プログラム内に require 'mysql' と書くと LIBMYSQL.dll が無いというエラーになった。C:\xampp\mysql\lib\libmysql.dll を C:\ruby\bin\libmysql.dll にコピーしたら大丈夫だった。

プログラム内に日本語を書くと invalid multibyte char (UTF-8) というエラーになる。この場合、Rubyのパスの直後の行に #encoding: utf-8 と書けば大丈夫。（空行を入れずに、パスの直後の行に書く。）

サーバーにアップロードするときは、Rubyファイルはアスキーモードで。

PHP5.2以降で使える ZipArchive でファイルを圧縮＆解凍するメモ。

ファイルを圧縮

test.txt と test/test.jpg を圧縮。圧縮後のファイル名は test.zip。

<?php

$zip = new ZipArchive();

if ($zip->open('test.zip', ZipArchive::CREATE) === true) {
  $zip->addFile('test.txt');
  $zip->addFile('test/test.jpg');
  $zip->close();
} else {
  exit('open error.');
}

echo 'complete';

?>

ファイルを解凍

test.zip を解凍。解凍したファイルは ./extracted/ 内に作成。

<?php

$zip = new ZipArchive();

if ($zip->open('./test.zip') === true) {
  if ($zip->extractTo('./extracted/') === true) {
    $zip->close();
  } else {
    exit('extract error.');
  }
} else {
  exit('open error.');
}

echo 'complete';

?>

iTunes上では意図したとおりに曲が並んでいても、iPodでのみ並び順がおかしい。iPadとiPhoneで意味不明な並びになる。…のような謎仕様に悩まされていたけど、ようやく意図したとおりに並んでくれたようなので一旦メモ。（あくまでも自分ルール。）

設定内容

iTunesでは

• トラック番号
• ディスク番号
• アーティスト
• アーティスト（読み）
• アルバムアーティスト
• アルバムアーティスト（読み）
• 名前
• 名前（読み）
• アルバム
• アルバム（読み）
• ジャンル

をすべての曲に設定する。（中途半端に空欄があると、曲の並びが変になることがある。）

トラック番号は基本的に「4/12」のような形式だけど、ボーカロイドの曲は頻繁に追加するので「4」のように設定。（分母は空欄、ということ。）

ディスク番号は、複数枚では無いCDなら「1/1」と設定。

• アーティスト（読み）
• アルバムアーティスト（読み）
• 名前（読み）
• アルバム（読み）

は、カタカナで統一。（ひらがなでもいいだろうけど、好みの問題で。）もちろんすべての曲に設定する。

• 作曲者
• 作曲者（読み）

は今は全部空欄にしてあるけど、そのうち全曲設定したい。←作曲者があるものは設定した。ただし中途半端に設定すると、やっぱりデバイスによっては並び順がおかしくなる。←「アルバムアーティスト」「アルバムアーティスト（読み）」を全曲に設定しておけば大丈夫っぽい。

さすがに並び順には関係しないと思うけど、アートワークも全曲に設定。基本的にはAmazonの商品画像（拡大イメージ）を使っているけど、1pxの余計な白枠とか残っていることがあるので、それらはFireworksで削除。

アルバムアーティストとコンピレーション

• 同じアルバムアートの曲が 1 つにまとめられない理由
• iTunes の「アルバムアーティスト」欄は何に使うの？（マイ備忘録）

複数のアーティストによって構成されるアルバムがバラバラに表示されてしまって、その対策は「コンピレーション」を設定すること…とよく紹介されているけど、これを設定すると「コンピレーション」を設定した曲だけが、50音順を無視してまとめて表示される。（iTunes以外で。）

なので「コンピレーション」は一切設定しない。代わりに「アルバムアーティスト」「アルバムアーティスト（読み）」を全曲に設定する。

設定例

設定例は以下のとおり。iTunesでのリストでは、常に以下の内容を表示している。（「時間」「再生回数」「最後に再生した日」は自動で設定される。）

課題

複数人で歌われている曲はどう設定するか？ジャンルが複数にわたる場合はどうするか？はまだ模索中。

今のところ、アーティストを複数設定したい場合はコンマ区切りにしているけど、一人ひとり個別に検索してくれるわけでは無いのでイマイチ。

ジャンルは1つに絞っているけど、PopとRockを同時に設定したり、PopとSoundtrackを同時に設定したり…とかしたい。

今使っている第3世代の iPod nano は、アルバムアーティストを考慮した並びになってくれない。最新の iPod nano なら対応している、と思いたい。（そのうち買い換える。）

TinyMCEは高機能なエディタですが、ファイルをアップロードする機能はありません。つまり本文に画像などを掲載したければ、あらかじめFTPなどでアップロードされたファイルのURLを指定する必要があります。

ですが、公式プラグインのMCImageManager（シェアウェア）を導入すれば、直接画像をアップロードして本文に掲載することができます。

以降はTinyMCEにMCImageManagerを導入するメモです。

準備

あらかじめTinyMCEを導入し、MCImageManagerも購入しておきます。

MCImageManagerの設定と設置

tiny_mce/plugins/ 内に、購入した imagemanager をアップロードします。

tiny_mce/plugins/imagemanager/files/ のパーミッションを 707 に設定します。（files/ 内に元々あるファイルはサンプルなので、削除しても大丈夫です。）

tinymce/tiny_mce/plugins/imagemanager/config.php でファイルのパスを設定します。22行目あたりにある

$mcImageManagerConfig['preview.wwwroot'] = ''; // absolute or relative from this script path, try to leave blank system figures it out.
$mcImageManagerConfig['preview.urlprefix'] = "{proto}://{host}/"; // domain name

この部分を、一例ですが以下のように変更します。（imagemanager への / からのパスと http:// からのパスを、環境に合わせて設定します。）

$mcImageManagerConfig['preview.wwwroot'] = '/var/www/html/tiny_mce/plugins/imagemanager/'; // absolute or relative from this script path, try to leave blank system figures it out.
$mcImageManagerConfig['preview.urlprefix'] = "http://www.example.com/tiny_mce/plugins/imagemanager/"; // domain name

tinymce/tiny_mce/plugins/imagemanager/login_session_auth.php で認証情報を設定します。4行目あたりにある

$username = "demo";
$password = ""; // Change the password to something suitable

この部分に、MCImageManagerにアクセスするためのユーザー名とパスワードを設定します。半角英数字で任意の値を設定します。

TinyMCEの設定

TinyMCEの plugins に imagemanager を追加します。例えば

plugins: 'advimage,advlink,contextmenu,inlinepopups,table',

と設定されている場合、以下のように ,imagemanager を追加します。

plugins: 'advimage,advlink,contextmenu,inlinepopups,table,imagemanager',

日本語化

MCImageManagerの画面は英語で表示されますが、日本語での表示にすることができます。

Languages for "MCImageManager" から「Japanese」をダウンロードします。

ダウンロードした ja.xml を tiny_mce/plugins/imagemanager/language/im/ 内にアップロードします。

tinymce/tiny_mce/plugins/imagemanager/config.php の16行目あたりにある

$mcImageManagerConfig['general.language'] = "en"; // en, sv

この部分を以下のように変更します。（en を ja に変更。）

$mcImageManagerConfig['general.language'] = "ja"; // en, sv

これで、MCImageManagerが日本語で表示されます。

起動方法

MCImageManagerを導入すると、TinyMCEの「画像を挿入/編集」画面の「画像のURL」の隣に「閲覧」アイコンが表示され、それをクリックするとMCImageManagerが起動します。login_session_auth.php で設定したユーザー名とパスワードを入力して認証します。

PHPでファイルを圧縮＆解凍する方法のメモ。shell_exec() で zip コマンドと unzip コマンドを呼び出すので、多少環境を選ぶかも。ロリポップサーバーでは動作した。

/usr/bin/zip のようにパスを指定しなければダメなサーバーもあるみたい。

圧縮だけなら、PHPで圧縮ファイル作成（zip） の方法でも可能。

ファイルを圧縮

zip コマンドで、test ディレクトリを圧縮。圧縮後のファイル名は test.zip。

<?php

if (shell_exec('zip -r test.zip test')) {
  exit('OK');
} else {
  exit('NG');
}

?>

ファイルを解凍

unzip コマンドで、test.zip を解凍。

<?php

if (shell_exec('unzip test.zip')) {
  exit('OK');
} else {
  exit('NG');
}

?>

某所で（主に）Webデザイナーさん向けにPHPの基礎を喋ってきたので、そのスライドを置いておきます。

• スライド

カーソルキーの「←」で戻り、「→」で進みます。もしくは画面クリックでも進みます。モダンブラウザなら見られるはず。
口頭で説明しつつのセミナーなので、スライドだけ見ると少し言葉足らずではある。（´・ω・｀）

Perl+CGIの実行に何かと手間取ったのでメモ。

XAMPPのインストール手順

• XAMPPのインストール（Windows版）
• XAMPPのインストール（Mac版）

Windows版でPerlを動作させる

XAMPP付属のPerlを使うと何かと面倒でPerlのパスも長いので、別途ActiviePerlを C:\usr\local にインストール。（ごく普通にインストールすればOK。）

Perlのパスは #!/usr/local/bin/perl で動く。

ユーザーディレクトリを使う場合、C:\xampp\apache\conf\extra\httpd-userdir.conf に AddHandler などの設定を追加する。

Mac版でPerlを動作させる

Perlのパスは #!/Applications/XAMPP/xamppfiles/bin/perl か #!/usr/bin/perl で動く。後者は、MacにもともとインストールされているPerl。

ターミナルに perl -e 'print "Hello, world!\n"' と入力して実行すれば、CGIではないPerlの動作確認ができる。

改行コードを「LF（UNIX）」にしておく。

ターミナルから chmod 755 xxx.cgi のようにして、プログラムに実行権限を与える。ファイルの読み書きなどを行うなら、同様に権限を設定する。

ユーザーディレクトリを使う場合、/Applications/XAMPP/xamppfiles/etc/extra/httpd-userdir.conf に AddHandler などの設定を追加する。

PHPでExcelファイルの内容を一覧表示するためのメモ。

Excelファイルを扱うのは厄介ですが、PHPExcel を使えば比較的容易に扱うことができます。Excelファイルを作成したりファイルの内容を一括で取得して配列に突っ込んだり…のサンプルは多いものの、fget_csv() みたいに一件ずつ処理していくサンプルが少なかったので自分用に方法をメモ。

主に、以下のページを参考にしています。

• PHPExcelで.xls形式のファイルを扱う
• 今度はPHPExcelを使ってみた

以下、xlsx か xls ファイルの内容をテキストデータとして取得するメモ。最終的には配列に突っ込んでいるけど、個別に処理するのも難しくないです。

<?php

echo "<!DOCTYPE html>\n";
echo "<html lang=\"ja\">\n";
echo "<head>\n";
echo "<meta charset=\"utf-8\" />\n";
echo "<title>Excel</title>\n";
echo "</head>\n";
echo "<body>\n";
echo "<h1>Excel</h1>\n";
echo "<pre>\n";

//読み込むExcelファイル
$file = './sample.xlsx';

//ライブラリを読み込む
require_once '../Classes/PHPExcel/IOFactory.php';

//ファイルを読み込む
if (preg_match('/\.xlsx$/', $file)) {
  $type = 'Excel2007';
} elseif (preg_match('/\.xls$/', $file)) {
  $type = 'Excel5';
} else {
  exit('error');
}
$reader = PHPExcel_IOFactory::createReader($type);
$excel  = $reader->load($file);

//シートオブジェクトの取得
$sheets = $excel->getAllSheets();
//$sheets[0] = $excel->getSheet(0);

$data = array();

//シートごとに処理
foreach ($sheets as $s => $sheet) {
  //シート名を取得
  $data[$s]['title'] = $sheet->getTitle();

  //列数と行数を取得
  $row_max = $sheet->getHighestRow();
  $col_max = PHPExcel_Cell::columnIndexFromString($sheet->getHighestColumn()) - 1;

  //セルごとにテキストデータを取得
  $content = array();
  $flag    = false;
  for ($r = 1; $r <= $row_max; $r++) {
    for ($c = 0; $c <= $col_max; $c++) {
      $text = get_text($sheet->getCellByColumnAndRow($c, $r));

      if (!is_null($text) and $flag == false) {
        $flag = true;
      }

      $content[$r][$c] = $text;
    }
  }
  if ($flag == false) {
    $content = array();
  }

  //データをセット
  $data[$s]['content'] = $content;
}

//結果を出力
print_r($data);

echo "</pre>\n";
echo "</body>\n";
echo "</html>\n";

exit;

/* 指定したセルの文字列を取得 */
function get_text($cell = null)
{
  if (is_null($cell)) {
    return null;
  }

  $value = $cell->getValue();

  if (is_object($value)) {
    //オブジェクトが返ってきたら、リッチテキスト要素を取得
    $rich_texts = $value->getRichTextElements();

    //配列で返ってくるので、そこからさらに文字列を抽出
    $texts = array();
    foreach ($rich_texts as $rich_text) {
      $texts[] = $rich_text->getText();
    }

    //連結する
    $text = implode('', $texts);
  } else {
    if (empty($value)) {
      $text = null;
    } else {
      $text = $value;
    }
  }

  return $text;
}

?>

ブログのRSSを解析して記事一覧を表示…とかをするためのメモ。

「RSS2.0と宣言されているのにデータの一部がAtomで配信されている。」とか時々あるので、宣言は信用せずに「それらしいデータがないか探す」という方針で実装。

feed_load_file() を実行すれば、階層のある連想配列でデータをまとめて返すので、あとは表示するだけ…という仕様にしています。

<?php

$feed = feed_load_file('http://freo.jp/info/news/feed');

echo "<!DOCTYPE html>\n";
echo "<html lang=\"ja\">\n";
echo "<head>\n";
echo "<meta charset=\"utf-8\" />\n";
echo "<title>RSSの解析</title>\n";
echo "</head>\n";
echo "<body>\n";

if (empty($feed)) {
  echo 'エラー';
} else {
  echo '<strong>形式</strong>';
  echo '<hr />';
  echo $feed['type'];
  echo '<hr />';
  echo '<strong>概要</strong>';
  echo '<hr />';
  echo 'title : ' . $feed['channel']['title'] . '<br />';
  echo 'link : ' . $feed['channel']['link'] . '<br />';
  echo 'description : ' . $feed['channel']['description'] . '<br />';
  echo '<hr />';
  echo '<strong>記事</strong>';
  echo '<hr />';

  foreach ($feed['item'] as $item) {
    if (strtotime($item['date']) > time()) {
      continue;
    }

    echo 'title : ' . $item['title'] . '<br />';
    echo 'link : ' . $item['link'] . '<br />';
    echo 'description : ' . $item['description'] . '<br />';
    echo 'content : ' . $item['content'] . '<br />';
    echo 'date : ' . $item['date'] . '<br />';
    echo '<hr />';
  }
}

echo "</body>\n";
echo "</html>\n";

exit;

feed_load_file() の内容は、長いので続きで。

続きを読む