原稿を書く月曜日

8:00

おはようございます。お天気はやや崩れ気味。今日は特に予定がないのでがっつり原稿を書きましょう。ブログなども書いておきたいですね。

メルマガ今週号:

配信されております。

ラディカルなRashitaのスタイルの変容|倉下忠憲|note

モーニング・キャンピング:

実践イメージを生成する - Unnamed Camp

関連ページリストを強く使う - Unnamed Camp

だんだんと名詞ではなく、文でページがつながるようになってきました。これがScrapboxingが目指す地点です。

NL:

第七章。4670文字からスタート。

まず、「あらためて、ノートをとるとはどういうことか?」を、突然思いついたので書いておく。

* * *

1時間ほど書いて、1万280字まで。だいぶ進んだというか、だいぶこの章で言いたいことが見えてきました。

10:00

あとで読む:

情報カードの小論文をリライトする|gofujita|note

読んだ記事の感想を即座に書く:

情報カードをリライトするとはどういうことか|倉下忠憲|note

11:00

R-styleの更新:

書きました。

Outputter for Twitterが最強のメモツールになるかもしれない件について – R-style

book:buy:

13:00

fragment:posterツールについて:

なんとなく昨日の手書きノートがいい感じだったので、それがメイン戦力になりそうな反面、Webでのポスター活動というのも考えてみたい。

たとえば、Keynoteか何かで情報をまとめて掲示すること。グラフィカルとまでは言えなくても、ある種の「配置」を持った情報の見せ方をすること。

Image from Gyazo

これは、単独情報が縦一列にならぶタイムラインでもないし、文章と画像の縦の組み合わせでしかない記事でもない。そういう表現を、ある時期以降の私たちは無くしてしまったような気がする。極めて文字だけになるか、あるいは一気に動画に飛ぶか。そういう間がない状態。

やってみるとわかるが、上記のようなposterは、しっかり文章を書いていくほどの負荷はない。普段とは違うツールを使うという意味での手間はあるが、綿密な文章を練るような苦労はないので、案外楽である。

また、情報がパッケージで提示できるのも大きく、複数の異なるコンテキストを「なんとなく」のつながりでまとめることもできる。これをブログの一時期でやろうとしたらひどく妙な感触を受けるあろう。

というわけで、記事でも動画でもない、かといって「写真」でもない、ポスターというのを自分的には興していきたい。

で、そのために、まず自分が発表する場としてのWebサイトについて考える。

* * *

コアのイメージの記述から。

WebページにDiv要素があり、そこにJavaScriptでimgを挿入する。

JavaScriptで、カーソルの左右キーを拾い、キーが押されたらimgのsrcを変更する。

倉下は、単にそのimg用フォルダに画像をアップするだけで、index.html周りは何もいじらなくていい。

これが基本的なコンセプト。どのように実装するのか、他の要素には何があるのかはまた考えるとして、骨子はこういう動作ができればいい。

imgの切り替えは、一番最初に画像を読み込んでおき(配置しておき)、キーが押されるたびに表示を切り替えるのか、それともキーが押されるたびに、新しく画像を読み込みに行くのかに違いはあるだろう。

読み込める(切り替えられる)ポスターはそこにあるすべてなのか、上限があるのかも考えたい。上限がなければ、長く続ければ続けるほど初回読み込みが重くなる。

キーが押されるたびに読み込むなら、毎回読み込みの時間がかかるし、それが軽快な切り替え動作を妨げる可能性はある。

あと、ファイル名を何かしらの連番で処理しておけば、その部分だけ変数で置き換えればファイルの指定自体はそう難しくなさそう。

スマートフォンやタブレットだと、キーでの切り替えではなくタップかスワイプでの切り替えになる。

画像の上に同じサイズの透明のdivを配置して、左半分をクリックしたら戻る、右半分をクリックしたら進む、といった動作が考えられる。

コードはたとえば以下のような感じ。

1
document.getElementById("mypic").src=pics_src[num];

ためしに作ってみよう。

* * *

できました。まずはカーソルキーではなく、時間で自動的に切り替わるもの。

Image from Gyazo

画像はサムネイルを使いました。

これで基本的な部分はOK。

次に、画像を本チャンにします。

* * *

本チャン画像にしたら、画像サイズが大きくなったので、その対応。1920×1080に。

* * *

うちのMBAではそのサイズではブラウザの一枚では表示されません。

ということは、ウィンドウサイズによって変える必要がありますね。

初回ロード時、windowサイズを取得して、それをimgに指定する、という感じか。

Image from Gyazo

だいたいOK。

残りは、キーイベントの取得と、ファイル名の取得。まずはキーイベントから。

* * *

キーイベントは実装終了。

あとは、現状ファイル名を配列で指定しているが、これが初回読み込み時のフォルダから読み込めれば最高。

* * *

が、調べてみたところ、たぶんjavascriptでは無理でphp的なものがきっと必要。さて、どうするか。

画像ファイルと一緒に、画像ファイルリストのjsonファイルを一緒にアップすれば、ややこしい処理を書く必要はないが、毎回そんなことをしたいかというと、結構微妙ではある。しかし、逆に、それをすれば自分で何を表示させたいかを選べることになる。これは、コンテンツが増え過ぎたときのコントロール材料にもなる。

さて、どうするか。

.jsonでファイルリストを自分で作っておけば、そのファイルがなんであっても、imgで表示できるものならばなんでもあり、というメリットもある。

とりあえず、いったん現状の状態で、どこかにアップロードしてみよう。

* * *

倉下忠憲のposter

アップロードしてみましたが、やはり最高品質のjgegだと切り替えが重いです。

最低品質にしても若干もたつきますね。しかも、キャッシュしていないので、一度表示したものでもサイド表示するときにもたつきます。あまり好ましくはないです。

あと、読み込みされているのかどうかがわからないのも難点です。

ボタンを押したら、何かが表示されるようにするとちょっとマシ。

あと、初回の時点で、メインとその次を読んでおき、それを切り替えるだけ、という7wriner方式でやればもうちょっと表示はスムーズになりそう。

18:00

Muteの連載準備:

なにぶん始めての試みなので、どう準備したらいいのかもわかっていませんが、それを含めてのトライですね。

21:00

本日の振り返り:

本日はガガガっとNL第七章を進めて、加えてPoster(仮)のサイトのプロトタイプを作ってみました。まだいろいろ改良点はありますが、画像で文字情報を伝える、という一つの文化を立ち上げられたらなと(大げさ)考えております。

というわけで本日はそろそろ閉店がらがらです。

お疲れさまでした。