懸崖日記

ひげよねの日記。 断崖のわずかな土に根を張る為にやっていること、考えていること。 大学院へ長期入院していましたが、とうとう退院してしまいました。 これからどうするか…。続けること、新しく始めること。いろいろ模索中。

気楽にコメント下さいな。

2013年09月

計画書?のチェック

修士課程のゼミ生の研究計画書のチェック。

夕方前に送付されてきていたものをチェックしました。
いや、しなきゃいけないかどうかは別ですが、夜にA先生から電話があって見ておいてっと。
どうやら、きっとチェックするだろうということで、MLに流させた模様。
えぇ、読みますよ(笑)
読むつもりでしたし。

ということで、夕方に斜め読みしたものを再度読み始めた。

・・・

失敗。

だめだこりゃ〜っと。
今後の計画はどこ行った?
書いてある内容は…、とてもここには書けない。

Wordファイルにコメント記入&メールの文書に指示、で返送しました。
あー、きっと、明後日くらいにまた送られてくるのだろうな。

PNGファイルの確認シールとJS

@ahinoreさんが作られたブックリーダーのJSを改変したものをPNGのフォルダに置くことで、(階層構造になりますが)ファイルの確認が出来るようにしました。
PDF-PNG変換はMacのツール(「AnyMP4 フリー PDF PNG 変換」)を使う&index.htmlは自分で編集が前提です。

index.htmlを呼び出すシールはこちらになります。
check_png.moon.zip

PNGフォルダに置く、index.htmlとjsフォルダはこちらになります。
(これは、シールではないのでPCでダウンロードして、enchantMOONにUSB経由で入れて下さい)
check_png_js.zip

まず、
check_png_js.zipを展開して、index.htmlとjsフォルダを取得。
この2つをenchantMOONのData/PNG/に入れます。
 /Data/PNG/index.html
        /js/jquery-1.10.2.min.js
        /js/jquery.cookie.js
        /js/png_bookreader.js

PNGファイルは、「AnyMP4 フリー PDF PNG 変換」を使って作ることを前提にしています。
「AnyMP4 フリー PDF PNG 変換」で、例えば「110009574384.pdf」を変換すると「110009574384」フォルダが作られ、そこに「110009574384_000001.png」という形でPNGファイルが作られます。
filelist

このフォルダをそのまま、enchantMOONのData/PNG/に入れます。

@ahinoreさんのjpeg変換ツールではindex.htmlを自動生成してくれますが、こちらは自分でindex.htmlを書き換えます。
以下の部分を書き換えます。
index_setting

{"name":"aaa", "dir":"xxx", "last":pp} が1セット(1つのPDF)です。
”aaa”には文書名を入れて下さい。
"xxx"には上記のフォルダ名(PDFファイル名)を入れて下さい。(上記だと"110009574384")
ppには作られたPNGファイルの数を入れて下さい。
{...}を複数書き込むことが可能です。

以上で準備完了です。
check_pngのシールを使用することで、@ahinoreさんのbookreaderと同じ操作で、enchantMOONに入れたPNGファイルを確認できます。
bookreaderとの違いは、画像表示の画面で、上部にファイル名を表示していることです。
ここに表示されている「フォルダ名/ファイル名」をそのまま「校正・推敲シール」使用時に書き込めば、その画像を貼り付けることができます。


最後に幾つか

謝辞
改変したjsを公開することを了承してくれた@ahinoreさんに感謝します。
@ahinoreさんが作られたjsがなければ、PNGファイルのチェックを行う方法を確立するのに、もっと時間がかかっていたと思います。

@ahinoreさんのbookreaderとの使い分け
大きな違いは扱うファイルがjpegかpngかです。
「校正・推敲シール」との併用を考えるとpngに統一したいところですが、pngはjpegに比べて数倍の容量を必要とします。
そのため、ページ数が多い資料や書籍などが元の場合は、やはり@ahinoreさんのbookreaderが良いのではないかと思います。

シール間の連携
これは今後できればいいなぁということで。

校正・推敲シール(その2)

「校正・推敲シール」を修正しました。
ダウンロードはこちら(前回と同じ)

シール台帳からシールのUpdateで修正版になるようです。
一応、今回のバージョンに変更されたことがわかるように、シールに「Ver.1.1」と書きました。


725x1024のPNGを表示するようにしていましたが、@taku3boku3さんから、異なる大きさのPNGを貼り付けると書き込み位置がずれるとの報告があり、貼り付けるPNGの大きさを指定できるようにしました。
ファイル名入力後にWidth, Height の入力をするようにしました。
デフォルト値として、725、1024を入力してあるので、変更しない場合はそのまま「OK」して下さい。
その他の使い方は変わりません(詳細はこちら)。

今回の問題はBackground.pngとなる画像の実際の大きさと、info.jsonに書かれている大きさが異なることが原因です。
大きさが異なる場合の現象を確認すると、
・pngの方が小さい場合は、画像表示も記入も拡大されてしまう
・pngの方が大きい場合は、逆に縮小されてしまう
となりました。

縦書PDFからHeight:1024で変換した場合を前提としていましたが、資料によっては大きさが異なる場合もあるので、縦横の大きさを指定できるようにした方が良いと判断しました。
ただし、横は5ドット分少なく表示するようにしています。
これは、他のシールを貼ることが出来るように空白を作るためです。

校正・推敲シール作成でわかったこと

校正・推敲シール作成は、試行錯誤を繰り返しました。
で、わかったこと、対応を書いておきます。

ページに張り付けられる画像はPNG画像で、JPEGは不可。
これは、シールの画像"background.png"をJEPGファイルに変更&info.jsonを書き換えて確認しました。
PNGであれば問題なくinfo.jsonのimageの値を"../../../PNG/aaa.png"とすると、aaa.pngを表示してくれます。
つまり、必ずしもシールのフォルダにあるbackground.png限定ではない。
ただし、info.jsonに記載されているwidth,hightや、clip.dataの値が表示のスケールに影響するようで、画像だけを変更すると、シールの(画像の)大きさが極端に変わってしまいます。
これらのことからinfo.jsonの記載内容を以下の様に変更するようにしました。
{"version":"0.2","x":0,"y":0,"width":725,"height":1024,"scale":1.0,"color":0,"transparent":true,"strokes":[],"clip":{"width":5.0,"color":-16777216,"type":"pen","data":[0.0,0.0,1.0,720.0,0.0,1.0,720.0,1024.0,1.0,0.0,1024.0,1.0]},"image":"background.png"}
 (表示する画像は縦1024,横725、ただし、実際の表示は縦1024,横720)

変換したPNGファイルを入れる場所は、Data/PNG/に固定するが、できれば張り付けるものを選択したい…。
ということで、window.prompt()が使えるなら、window.requestFileSystem()も…と思ったのですが、requestFileSystemは使えなかった。
(enchantMOONのようなシステムで、下手に中をいじられたら困るし、これは仕方ないかな)
そのため、ファイル一覧表示、ファイルのコピー(Data/PNG/から./へ)、指定ファイルの有無の確認(エラー対応)は無しになりました。
自分で円ちゃんにファイルを入れたのなら、そのファイル名はわかっているという、勝手な前提にしました(運用でカバー)。

シールからの操作でinfo.jsonを上記の様に(ファイル名は../../../PNG/[指定ファイル名(.png)])書き換えてみます。
画像の変更はできました。
ただし、シールの座標(x,y)が変更されない。
たぶん、x,yの座標はシールを張り付けた時に確定され、その後は参照もされないのだろう。
シールの位置を変更するAPIもない。
したがって、シールを張り付ける時に画面左上に合わせるように操作してもらうことにしました(運用でカバー)。
【追記】
シールの移動ができるので、その時にx,y座標は参照・更新されていることになります。
また、シールの移動ができるので、最初の場所指定が必須ではないですね。
ただ、やっぱり表示位置を変更するAPIは欲しいかも。

さて、シールを張り付けた時に、ファイル名入力を要求してinfo.jsonを書き換えると、指定したファイルの画像が表示されるのですが、なぜかinfo.jsonのimageはbackground.pngに書き換わってしまいます。
また、格納されているbackground.pngの中身も、もともとのシールのPNGではなくて、指定したファイルのものになっています。
どうやら、enchantMOONのシステムがstickerattachの実行後に、info.jsonのimageとbackground.pngを書き換えているようです。
まぁ、書き換えてくれた方が、/Data/PNG/から対象ファイルを削除してもページ表示に影響がないので助かるのですが。

ということで、実装そのものは簡単です。

StickerPuppet.create("シール", {
behavior: [{
stickertap: function(event) {
enchant.puppet.stopTheatre();
},
stickerattach: function(event) {
var info = "{\"version\":\"0.2\",\"x\":0,\"y\":0,\"width\":725,\"height\":1024,\"scale\":1.0,\"color\":0,\"transparent\":true,\"strokes\":[],\"clip\":{\"width\":5.0,\"color\":-16777216,\"type\":\"pen\",\"data\":[0.0,0.0,1.0,720.0,0.0,1.0,720.0,1024.0,1.0,0.0,1024.0,1.0]},\"image\":\"";

var file = window.prompt("FileName", ".png");
var path = "../../../PNG/" + file;

info += path;
info += "\"}";

var page = MOON.getCurrentPage();
var seal_backing = page.papers;

var seal_paper = MOON.getPaperJSON(seal_backing.toString());
MOON.setPaperJSON(seal_backing.toString(), info);
enchant.puppet.stopTheatre();
},
stickerdetach: function(event) {
enchant.puppet.stopTheatre();
}
}]
});


今回のシール開発は、enchantMOONをPCに繋いだり、離したり、何度も繰り返しました。
ネット経由で開発するやり方を導入しないと、やはり大変ですね。

校正・推敲シール

echantMOONを使っている方は、絵心のある人が多いように思う。
絵がかけないわけではない(?)が、どちらかというと文章を書く方だ。
ということで、以前から書いているが、円ちゃんで「文書資料の表示、書き込み」がしたい。
もちろん、円ちゃんではWordやPPT文書の表示なんかできない。

PDF.JSとか使ってPDFを…と思ったが、複数ページのPDFの表示可能(ページ切り替え可能)&ページごとの書き込み保存をするシールを作るのは困難。
(PDF.JSはブラウザ上で動作するものの様だし)
JPEGにして複数ページに一括表示も考えたけれど、新規ページを作る方法がわからない。。。
1つのページにJPEG変換したものを表示するブックリーダーを@ahinoreさんが作られたけど、やっぱり読みたいだけじゃなく書き込みたい(≠編集したい)。
(あ、@ahinoreさん作のリーダーも使うけどって意味です)
(リーダーで読んで、気になるページは貼り付けて書き込み…とか考えてます)

シールとして文書の1ページを張り付けちゃえ!っと、Web経由でDropboxから切り取っちゃえっと、したけれど、切り取り面が汚くて気に入らない。
PDFを表示できないので
どうせPDFから画像に変換するなら、円ちゃんの中に入れてしまえばいいじゃないか。

ということで、試行錯誤してシールを作ってみました。

background

ダウンロードはこちら
png.moon.zip

【Update】
画像の大きさを入力できるように修正しました。
記事はこちら
(上記ダウンロードのリンクは最新版になっています)


試行錯誤してわかったことは、ページに張り付けられる画像はPNG画像で、JPEGは不可ということ。
なので、表示したい資料をPDF化して、更に各ページ毎にPNG化するところから始めます。

【準備】
PDF化はされているという条件で、ページごとのPNGを作るところから…ツールを使えばいいんです。
・Windows
 ghostscriptをインストール(http://www.ghostscript.com/download/gsdnld.html
 PNGに変換
 例)"%ProgramFiles%\gs\gs9.10\bin\gswin64c.exe" -dSAFER -dBATCH -dNOPAUSE -sDEVICE=pngalpha -r150 -sOutputFile="test_P%03d.png" "test.pdf"
 縦1024(横725)のファイルを前提としているので、フリーのツールを使って修正
 (例えばこれ(http://www.forest.impress.co.jp/library/software/ralpha/))
・Mac
 「AnyMP4 フリー PDF PNG 変換」
 これを使えば、大きさも指定できて一発でページごとのPNGファイルを作れます。
 無料だし(^_^)

【作成したPNGを円ちゃんに入れる】
enchantMOONとPCを接続
 /Data/MyNotebook1
  ----/PNG   ←このフォルダを作って、ここに表示させたいPNGファイルを置く

【操作】
このシールは空のページの画面左上に置くことになります(理由は校正・推敲シール作成でわかったことを参照して下さい)。
画面右上ではないところに置いた場合、一旦削除して、再度貼り直すことになると思います。
【追記】よく考えたら、貼り付けた後に動かして調整しても良いので、左上に必ず置かなくてはならないわけではありませんね。
IMG_0279


シールを置くとファイル名を聞いてくるので、表示したいPNGファイル名を入力します。
ファイル名は間違えないで下さい。
間違えた場合は、一旦ページそのものを削除したほうがいいと思います。
IMG_0276


すると、こんな風にPNGが画面に貼り付けられます。
IMG_0277


画面右側は別のシールを呼び出せるようにわざと空けてあります。
例えば、ペン変更シールを呼び出してペン色を変更し、書き込みをするとこんな風になります。
MyNotebook1_H_iUtWBF1378736487723


物書きの人にとっては、そこそこ使えるものじゃないかなぁと勝手に考えてます。
使えませんかね?

【追記】
@ahinoreさんが作られたブックリーダーのJSを改変したものをPNGのフォルダに置くことで、(階層構造になりますが)ファイルの確認が出来るようにしました。
記事はこちら
プロフィール

ひげよね

メッセージ

名前
メール
本文
J-CASTニュース
QRコード
QRコード
  • ライブドアブログ