カテゴリー: ITコミュニケーション

ある「フリーランスの作家だか他称自称ジャーナリスト」氏が民進党が参考に呼んだ人が筋悪だったと書いていた。「嫌な予感しかしない」と書いたのだが「どうして俺のあのツイートを読んで、民進党の議員が何かをしでかすと思い込むのかわからん」というような内容でキレ気味に返ってきた。

面白いなと思ったのは、その返事が全く的外れだったことだ。僕は前回民進党の掲載しているPDFに改ざんの後があるのではないかと書いた。どうも筋の悪い情報や人が民進党に集まってきているなあという疑念を持っているのである。つまり、民進党の議員が何かするに違いないというのは、作家さんの脳内補正の結果であって、コミュニケーションの結果ではないということになる。

日本人は党派性に反応しているだけで、事実は特に重要視しないことはわかっているので「民進党には頑張って欲しいから心配しているんですよね」というようなことを書いた。返事はこなかったので納得したか、その他の炎上しそうな何かに突入していったのだろう。

普段から喧嘩腰のひとなので特に驚きはしないのだが、面白いのはこの人に「情報が役に立たないと思うんだったら自分で調査しろや」というような喧嘩を売っている人がたくさんいるということだ。つまり、わざわざ喧嘩をふっかける人がいて、自分が言っていることが100%理解されないと怒り出すという人がいることになる。結果＜議論＞が荒れるわけだが、どうしてこういうことが起こるのだろうか。

一つにはこの作家氏がどうも「自分が考えている通りにことが進まない」ことに大変イライラしているという点だ。自分の判断基準がありそれに沿わない人がいることが許せないのではないかと思う。こういう人はよく見かけるが、議論には向いていない。議論とは誤解や知識のなさを埋めて、相手を説得するための技術だからである。そもそも成功するかがわからない上に、人と自分は意見が異なるということが前提なっている。村落的な状態で育った人たちはそもそも議論に向いていない。

ということは裏を返せば「知らない」ことが前提になっているソーシャルネットワーキングサイトは荒れないということである。

さて、最近新しいSNSを二つ始めた。一つは外国人の疑問に答えるQUORAというものだ。何回か答えを書いたが、普段当たり前と思っていることを改めて調べるといろいろな発見ができて面白い。例えば「日本のレストランに箸を持ち込んでも怒られないか」という疑問について調べていて、割り箸をやめてマイ箸を持ち込もうという運動があるのを知った。さらには割り箸は間伐材だから特に環境を破壊していないという意見もある。

次にWEARの投稿もやっている。こちらはみんな自分の服を褒めて欲しいわけだから、あえて他人の服を悪し様にいうことはないし、そのような仕組みもない。興味がなければそのままスルーすれば良いという仕組みになっている。実践が中心のSNSは荒れることが少ないわけだが、知らない人が知っている人を参考にするという仕組みがあり、うまく機能していると言えるだろう。

Twitterが荒れがちなのは、参加している人が答えを知っていると思っているからだろう。例えば、反安倍の人にとっては、日本の政治がよくなるためには安倍首相が今すぐ退陣しなければならない。これがなかなか起こらないからみんなイライラしているわけである。

これを打破する方法はいろいろあるのだろうが、SNSの例からみちびきだせる答えは2つあるように思える。一つは新しい視点を取り入れてゆくことで、もう一つは実践を伴うということである。新鮮な視点を得ることには喜びがあり、その分イライラが軽減される。

そう考えると、日本語のTwitterで議論が成り立たないのは、日本人のメンタリティや言語の構造などとは全く関係がなく、単に新しい情報や視点が入ってこないことの裏返しなのかもしれない。いつも同じような人たちが同じようなことを言っている環境というのは、改めて考えてみるとかなりフラストレーションが溜まる状態なのではないかと考えられる。つまり、新しい視点や知識は酸素のようなものなのだ。

だが、それを打開するのは極めて簡単だ。最近では様々なSNSがあり、特に海外旅行したり、繁華街に出かけて行かなくても様々な体験をすることができる。例えばかつて流行を知ろうと思ったら街に出て写真を撮影するしかなかったわけだが、これは一歩間違えると「俺を撮るな」と通報されかねない行為だった。だが、今では自分から進んでコーディネートを紹介して、アイテムを買う場所まで教えてくれるのだから、つづづく便利な時代になったものだと思う。

やはりネットというのはうまくつかえばとてつもなく便利な場所なのである。

Webサイトを使ってコレクションの写真をまとめて発表したい。でも、できたらシステムのメンテナンスではなくコレクションそのものに集中したいですよね。そこで写真の管理を極力簡単にするようなワークフローを考えてみました。準備するのはPHPが動くウェブサーバーとMacintoshです。globは4.3以上で動くそうですがもうPHP5じゃないシステムは残っていないと思います。最新のバージョンではWeb共有はなくなってしまいましたが、ローカルでAppacheを走らせることは可能だそうです。

まずコレクションの写真を撮影したら作品ごとにフォルダーを作ります。Macintoshはフォルダーに写真を貼り付けられるのでフォルダーのサムネイルを写真にすると整理が楽です。Windowsの人はどうやって写真を管理しているのだろう。

1. フォルダーを作る。
2. コマンド＋iで情報を表示しフォルダーアイコンを選択。
3. 好きな写真をコピーして、貼り付けます。

前回作ったシステムに導入してゆくのですが、今回はあらかじめディレクトリとタイトル情報を配列化しておきました。こうするとデータベースを作らなくて済むので楽です。管理画面を作る必要もないし、phpMyAdminを毎回叩く必要もありません。で、コアになるコードはこれだけ。ファイルはアルファベット順に読まれるので時系列順に名前をつけておいたほうがいいです。これでファイルを追加するたびにデータベースを書き換えたりHTMLを書き換えたりする必要はなくなります。

foreach (glob($dir,GLOB_BRACE) as $imagefiles){
echo <<<EOF
<div class=”item”><a href=”$imagefiles” rel=”lightbox[images]”><img class=”centerimage” src=”$imagefiles” alt=”image”></a></div>
EOF;
}

<script src=”masonry.pkgd.min.js”></script>を使うと自動でグリッド上に並びます。Masonryなどは別途ダウンロードしてください。スマホでの表示を考えると横幅280ピクセル位がよさそうです。帯域が狭いときはサムネイルとなどを作ったほうがいいのかもしれませんが、面倒なので今回はやりません。回線が早いと読み込みにさほど時間もかからないので便利な時代になりました。サムネイル作りはPHPで自動できると思います。

<script src=”lightbox2/src/js/lightbox.js”></script>をライトボックス化のために導入します。面倒なので自分でプログラミングはしません。ライトボックスを使うとこのように大きな画像が表示できます。スマホで試したら自動で表示変更してくれました。ただスワイプじゃないのでちょっと気分が出ません。スワイプで使えるプラグインも探せばあるかも。 Masonryは最初の読み込みで不具合がでることがあるので、イメージがロードされた時に並べかえが必要です。そのためにもプラグインを導入します。<script src=”imagesloaded.pkgd.min.js”></script>です。イメージがロードされたらこれを読み込むと画像が整列するという仕組みです。

$(function() {
var $container = $(‘#container’); $(‘#container’).imagesLoaded( function() {
$container.masonry({ itemSelector: ‘.item’, isFitWidth: true, isAnimated: true
});
});
});

で、グリッドが自動なので縦と横の写真が混在していても大丈夫です。スマホでもなんとか表示できます。

DISQUSを使えばコメント欄もつけられます。Twitterでシェアなどもできますが、その場合にはmetaタグなんかを整備しておいたほうがいいです。これで、写真を軸にしたSNSも簡単に作れるわけです。今回の例は植物なので時系列で並べてますが、ジャンル別にディレクトリを分けてもいいと思います。

もともとは 「向こう一週間の最低気温が５度を超えたら植物を外に出す」というようなシステムを作りたかったのだが、ライブドアのAPIでは最低気温・最高気温も今日と明日のものしか分からない。そこで今日の気温をもとに何を着ればいいのかを薦めてくれるというシステムを作ることにした。

まず下準備として写真にコートやジャケットなどというタグ情報を追加しておく。気温が7度以下になったらコートを着るなどというように決めておくのだ。ポイントになるのは10度近辺だとコートもジャケットも着られるが、7度くらいになるとコートしか着られないというように条件が細かく変わる点だ。

次にライブドアのWeather Hackからお天気情報を引っ張ってくる。今回は千葉市（120010）を選んだ。リクエスト結果がJSONで戻ってくる。PHPの受け取りは意外と簡単でfile_get_content($url)で受け取り、エンコーディングを整えた（多分UTF-8なのでそのままでもよいと思うのだが）うえで、 json_decode($json,true)する。すると配列に情報が入るのであとはprint_rで中身を確認しつつ必要なデータを取り出すだけ。意外と簡単だ。

お天気情報配信はRSSが多いようでこれだと少し使いにくい。Yahoo! はこのタイプ。

さて、個人的に使うものを世界中に発信するわけにもいかないので、いつものようにログイン情報がないと「使えない」旨の表示を出す。ただしお天気情報そのものは商用利用しなければ使っていいですよという仕組みのようなのでそのまま表示する。

ログインすると写真が表示される。例えば気温が7度以上で10度未満だと、コートは表示されないがセーターとジャケットが表示されるようにする。if($max < 7){コート}elseif{ジャケットとセーター}のようになる。とても簡単。

気に入らないコーディネートが表示されたら、ボタンを押して別のイメージをランダムに表示する。データベースをもう一度読むことはなく、予め該当する写真のURLをブラウザ側で蓄積しておく。JavaScriptを利用している。

同じことを、ファッション雑誌でやろうとすると朝起きたときに雑誌をひっくり返して、好みのコーディネートを確認するということになり現実性がない。例によってスマホで見てみたのだが、お天気とコーディネートを一覧するのには明らかに不向きだった。ただ、画像そのものをボタンにするなど工夫をして、とりあえずコーディネートを表示するようなシステムを作ることは可能だ。

このようにファッション雑誌もオンライン化すれば工夫によって様々な再利用ができることがわかる。

ファッション雑誌を集めている。コーディネートの参考にするためだ。スキャンしてウェブサーバーにアップロードする。「公開」状態になってしまうとまずいので、ユーザーIDを入力してアクセスを制限する。

スキャンの自動化

スキャナーした写真はそのままでは使えない。多分ページをバラバラにしてそのまま保存すると言うこともできるのだろうが、コーディネートだけを切り取って色彩を補正する。これは手作業が必要だ。リサイズは自動化できるのだがエラーも多いので手作業でやっている。しかしファイル名を整えるのにはアップルスクリプトが使える。ファイルをドロップすると連番と日付を付けてくれる。

メタ情報が重要

写真が100を超えてしまうとどこになにがあるか分からなくなる。そこで、データベースに情報を入れておくのが重要だ。付加する情報は試行錯誤の後、次の４つになった。

• 時期（年・月）
• どの雑誌（あるいはカタログ）から抜いたのか：出典
• カテゴリー
• タグ

時期の情報は意外と大切で、例えばジーンズの形が時代によってかなりめまぐるしく違ってくるなどと言うことが分かる。だが実際には雑誌によってかなり時代性が異なるので、出典ごとに並べたほうが分かりやすい。

すべての写真はなんらかの目的のために収集されているので、何らかのカテゴリーに分類できる。カテゴリーはある程度の決まりを作ったうえで分類しないと収拾がつかなくなる。一方タグはいくつでも思いつくままに作れる。１つの写真に複数のタグということも可能なのだがUIはやや複雑になる。１つに写真に１つのタグでもそれなりに使える。

つまり自由に使える分類と固定化した分類の２つがあると利便性が増すのだ。

インターフェイスとスマホ対応

レスポンシブルデザインができて当たり前みたいな風潮があるので、最初は両対応にしようとしたのだが、これはやめたほうがよさそうだ。PCは一覧性がメリットだが、これをスマホで再現すると写真が良く見えない。ポイントは「予め写真の大きさやプロポーションが決められない」という点であり、既存のグリッドデザインでは対応できない。ただ、ウェブでみるためには写真の高さは640px程度に抑えておいたほうがよい。

PC版で異なる大きさとプロポーションの写真を並べるためにはmasonryというプラグインが使える。Pinterest（あるいはテトリス）のように写真が並べられるのだが、可変グリッドと言う名前がついているそうだ。jQueryを利用している。メニューはアンカーで並べたほうが全体像が掴みやすい気がする。

一方、スマホは写真を一枚づつスワイプしたほうがよい。FlickityというjQueryのプラグインが使える。写真の高さをCSSで(imgタグではなく)100%指定した上で並べるとそれなりの閲覧性が得られる。メニューをアンカーで並べるとうるさいのでプルダウンメニューを多用することになる。リストをプルダウン化するプラグインもあるのだが面倒なので利用しなかった。

これを切り替えるのだが、ありものを継ぎ足して作ったためにかなり場当たり的な構造になっている。切り替えにはJavascriptを使う。自作したほうがよいのだろうが、ネットには簡易的なものが落ちている。ただし、当たり前だがPCではスマホのデザインも使える。ということで実際にはスマホでアクセスしてきたときだけ、スマホ専用のデザインに切り替えるようになっている。

後作業

今回は数年に渡って開発したものを継ぎ足しながらシステムを作った。当初はlightbox.jsなどを利用していた。これはprototype.jsを使うのでjqueryベースのスクリプトとはあまりコンパリビリティがない。またタグ付けのシステムは画像をリストアイテムとして扱うのだが、可変グリッドシステムはdivを使っている。このためこの２つのインターフェイスには互換性がない。

本来ならば、使われているスクリプトやメニューを外部化したり整理したりということが必要になるのだろう。データベースのアクセスも２つのやり方が混在していたりする。こういうリファクタリングをやらないとプログラミング上手にはなれないと思うのだが、なんとなく「動けばいいや」と思ってしまうところがある。最初から別のシステムを作り直してもよいかもしれない。

行動が楽になる

画像データベースに限らないと思うのだが、こうしたシステムを作ると行動が楽になる。例えばカーディガンを着るときに「過去に見た写真」を数ある雑誌から探すのは面倒だが、このシステムを使えばスマホの画面から一発でほしい情報に到達できる。