カテゴリー: プチコン3号

以前、ブログを書いてから随分立ちますがいろいろ取り組んでいました。その中でもニンテンドー 3DS ダウンロードソフト ‘プチコン3号’ 用のプログラムを２つ作成しました。２つともプチコン大喜利に投稿してみました。すでに Twitter や Miiverse で公開しましたが、公開キーと実行画面をブログにも載せておきます。

YOS_MINE
マインスイーパ
開いたセルに書かれた数字の数だけ、周りのセルに旗を立てて、数字の書かれた
セルをAボタンで押すと旗を立てていないセルを開くことができます。
公開キー E3AN3XZF

YOS_NEKO
猫や犬が画面の中を駆け回るプログラムです
女の子は、十字ボタン、スライドパッドで操作できます。女の子が移動すると
猫達が集まってきます。しばらくすると離れていきます。
公開キー 23N432QE

YOS_MINE 実行画面

図 1) 初級画面

図 2) 中級画面

図 3) ゲームクリア時の下画面

図 4) ゲーム選択画面

YOS_NEKO 実行画面

図 5) YOS_NEKO

プチコン３号 - 命令表
http://smileboom.com/special/ptcm3/reference/

上記ウェブページを PDF 化するのに作成した Mac 用プログラム SliceImage を下記 URL で公開します。(実際には、PDF のダウンロードリンクが上記ページにあるので PDF 化する必要はありません。)

SliceImage version 1.0
【概要】
縦長の画像を指定したサイズで分割し、それぞれの画像を PNG 形式 (72 dpi) の
ファイルに書き出すアプリケーション。
【動作環境】
Mac OS X 10.9 Mavericks 以上で動作します。
http://kyoshiaki.sakura.ne.jp/osx/Download/SliceImage.zip

恥ずかしい話ですが、上部に PDF ファイルのリンクがあるのを見落としていました。実際には無駄になってしまいましたが、Web ページを PDF 化するのに役立つかもしれないと思い公開します。

【使用例】
Safari， ‘プレビュー’、拙作 ‘SliceImage’ を使ったウェブページの PDF 化

プチコン３号 - 命令表
http://smileboom.com/special/ptcm3/reference/

上記ウェブページを PDF 化する過程で説明したいと思います。

Safari のメニュー/ファイル/プリント… で PDF 化できるのですが、色がついた画面をそのまま再現してくれません。

それで Safari の機能拡張 Awesome Screenshot 1.4.5 を利用します。

注意) Google などで検索すると Awesome Screenshot 機能拡張が訪問したサイトのURLを外部に送信している記述も見つかるので十分注意してください。使用後は、アンインストールしたほうが良いかもしれません。

まず、Safari のメニュー/Safari/Safari 機能拡張… を選択してください。表示されたウインドウをスクロールすると



図 6) Safari 機能拡張

上図のように Awesome Screenshot 機能拡張が見つかるはずです。アイコンをクリックしてください。



図 7) Safari 機能拡張

上図赤枠の部分 Install Now をクリックして Awesome Screenshot 機能拡張をインストールしてください。



図 8) Awesome Screenshot 機能拡張

インストールが成功すると Install Now という文字が Installed に変わり、上図のようにツールバーの URL テキストフィールド左横に Awesome Screenshot 機能拡張アイコンが追加されます。



図 9) 機能拡張

後、余計な機能が追加されるので Safari のメニュー/Safari/環境設定… を選び、’機能拡張’ タブから Awesome Screenshot を選び、

Enable similar product search powered by Superfish
Enable price comparation

のチェックマークを外してください。通常、ページを開くと有効にするか尋ねてくるので NO を選んでください。

 プチコン３号 - 命令表
http://smileboom.com/special/ptcm3/reference/

ここで、例として上の URL ページ全体 (実際に表示されて部分ではなく、スクロールして表示されるページ全体) を画像に保存したいと思います。

まず最初に、上の URL を Safari で開きます。



図 10) プチコン 3 号 – 命令表

上図 Awesome Screenshot 機能拡張アイコンをクリックし、メニュー

Capture Visible Part of Page 		: 表示されているエリアだけキャプチャ
Capture Selected Area			: マウスで選択したエリアだけキャプチャ
Capture Entire Page				: ページ全体をキャプチャ

から、Capture Entire Page を選択してページ全体をキャプチャします。自動的にスクロールして下図のページが開きます。


図 11) 編集

ここで文字を追加したり、線を描画できますが、何もせず上図のように Done ボタンをクリックして終了します。


図 12) スクリーンショット

上図のようにスクリーンショットが画像として表示されます。



図 13) スクリーンショット保存

上図のように画像を右クリック(CTRL + 左クリック)してメニューから ‘イメージを別名で保存…’ を選択します。


図 14) ダイアログ

上図のように保存するファイル名を尋ねられるので、reference.png と入力します。保存する画像形式は PNG イメージなので拡張子 png を忘れずに追加してください。



図 15) スクリーンキャプチャ終了

図 14) より、保存先がデスクトップなので、デスクトップに reference.png という名の画像ファイルが保存されているはずです。スクリーンキャプチャは終了したので、上図の赤枠の x ボタンをクリックしてタブを閉じてください。

デスクトップに PDF という名前のフォルダを作り、そこに先ほど保存したファイル reference.png を移動します。



図 16) デスクトップ/PDF

図 17) SliceImage 実行画面

SliceImage version 1.0
【概要】
縦長の画像を指定したサイズで分割し、それぞれの画像を PNG 形式 (72 dpi) の
ファイルに書き出すアプリケーション。
【動作環境】
Mac OS X 10.9 Mavericks 以上で動作します。
http://kyoshiaki.sakura.ne.jp/osx/Download/SliceImage.zip

Finder 上で SliceImage をダブルクリックして起動し、ラジオボタン ‘A4: 自動計算’ を選択します。refernece.png ファイルを Finder 上からドラッグして、SliceImage ウインドウの茶色いエリアにドラッグ・ドロップしてください。

=================================================
ファイル名: reference.png
サイズ: 2416.0 x 89278.0
分割サイズ: 3417.47096774194
合計(ファイル数): 27

reference.png 画像ファイルの分割が終わると ‘情報’ テキストエリアに上の文字列が表示されます。(注意、画像が大きいと処理が終わるまでに随分時間がかかります。しばらくお待ちください。)

この場合、横: 2416 ピクセル、縦: 89728 ピクセルの画像 reference.png を縦方向に約 3417 ピクセルで分割しています。画像ファイルは 27 個に分割されました。(Retina ディスプレイではない Mac で Safari の画面をキャプチャーすると reference.png の縦横サイズは小さくなります。)



図 18) SliceImage 実行後



図 19) 1_reference.png から 27_reference.png を選択

Finder 上で 1_reference.png から 27_reference.png を上図のように選択します。
(reference.png アイコンの左上の何もないエリアを左クリックし、右下の方向にドラッグします。その後、そのまま下へドラッグするとスクロールするので 27_reference.png などの全てのアイコンが含まれるようにドラックして離します。すると全てのファイルが選択されている状態になります。シフトキーを押して、refrence.png アイコンを左クリックしてください。 reference.png アイコンが選択状態から外れます。)



図 20) プレビュー

Finder 上で 1_reference.png ファイルをダブルクリックします。すると上図のように ‘プレビュー’ が起動します。上図のように赤枠の部分のアイコンをクリックして、サムネールを選択します。下図のようにサムネールが表示されます。



図 21) サムネール表示

上図のようにサムネールに 1_reference.png から 27_reference.png まで順番に並んでいるか確認して下さい。順番が違う場合は、サムネールに表示されている画像をドラッグして挿入したい場所に移動してください。(例えば、上図の 3_reference.png を 1_reference.png と 2_reference.png の間にドラッグ・ドロップすると 1_reference.png、3_reference.png、2_reference.png の順になります。)

また、27_reference.png だけ別ウインドウで開いてしまった場合は、そのウインドウを閉じ、Finder 上の 27_reference.png ファイルを ‘プレビュー’ 上のサムネールの 26_reference.png の上にドラッグして + の画像が現れたらドロップしてください。


図 22) プリント

上図のように ‘プレビュー’ からメニュー/ファイル/プリント… を選択します。



図 23) PDF 化

SliceImage で今回 A4 サイズで収まるように画像を分割したので、用紙サイズは A4 に設定してください。
左下の PDF ポップアップメニューから ‘PDF として保存…’ を選択してください。


図 24) PDF 化

保存ファイル名を入力してください。pdf 以外の拡張子が付いていると保存できないので、上図のように reference.png.pdf と入力してください。reference だけだと自動的に拡張子 pdf が付きます。’保存’ ボタンをクリックしてください。



図 25) PDF

保存した refrence.png.pdf ファイルを Finder 上でダブルクリックすると上図のようにプレビューで表示されます。

refrence.png.pdf ファイルに新規のページを追加したい場合は、テキストエディットで A4 サイズのページを1枚 PDF 化し、そのファイルを Finder 上から ‘プレビュー’ のサムネールの挿入したい位置の前のサムネイルにドラッグし、+ の画像が現れたらドロップします。’プレビュー’ のメニュー/ファイル/保存 を選択すると追加できます。

テキストエディットで refrence.png.pdf の目次を作成し、上記例のように refrence.png.pdf の最初のページに追加すると iPad の GoodReader などで閲覧するのに便利です。