ogu-tec

日頃写真をもっぱらiPadで撮っている。
木工をやっている最中も途中過程をブログに載せるためにiPadを傍らに置いている。
ところがこの写真をいざブログに載せるにあたっていろいろ面倒がある。
facebookなどのSNSに載せるのはそのまま簡単にできるのだが、自前のWordpressのブログに編集した上で載せるにはそれなりの手続きが必要だ。
それをまとめてみた。

まず、iPadで撮った写真（スクエア）は次のようなものだ。

サイズ：1936×1986 72dpi 1.54MB
ファイル名：ファイル 2016-04-12 14 26 29.jpeg
位置情報他：あり

これだけでも自前のブログに載せるにはさまざまな問題があることがわかる。

サイズが大きすぎる。
ファイルの拡張子がjpgではない。
ファイル名が日付になっている。
余計な情報がいろいろ入っている。

などだ。

以前にブログに載せる適当な画像ファイルのサイズについて書いたことがある。
それによればせいぜい横幅が600ピクセルあればいいと言う結論だった。
そこでこの画像ファイルを変更することなる。一枚なら画像処理ソフトを使うのもいいが複数枚になると面倒だ。そこで以下の方法を取っている。

１．一括リネームする。
２．一括サイズ変更をする。

１は「RenameKn.exe」を使う。
２は「リサイズ超簡単！Pro」を使う。
いずれもフリーソフトだ。ベクターからダウンロードできる。
（実は拡張子がjpgなら１は必要ない。２でもリネームができるからだ。）

１．

フォルダを選択して
この場合以下の設定

連番チェック
基本ファイル名入力
連番桁数４
開始番号１

拡張子変換チェック
jpg入力

赤⇒クリック

画面は変換後

２．

フォルダを選択して、全てのファイルを指定
この場合の設定

横サイズ優先で
480を入力
JPG保存品質で
100を選択
Exif情報の継承のチェックをはずす
あとはそのまま

特に「Exif情報の継承のチェックをはずす」は重要
ここで余計な情報が削除される。

変換開始をクリック

変換後の画像は同じフォルダ内にResizeフォルダ画でその中におさまる。

できた画像は

サイズ：480×480 96dpi 185KB
ファイル名：spoon0001.jpg　～　spoon0004.jpg（連番）
位置情報等：なし

かなり小さくなりました。実際の画像はこれを使ったブログ記事「木製スプーンの作成」で見てください。

実は前の記事をUPしてiPadで見てみたら、一部の画像が回転して表示されていました。これはきちんと撮影していなかったのと、加工した際もとの画像情報が引き継がれてしまったためです。
早速修正しましたが、ここで大事な点を忘れていました。

WEB上に画像を掲載する場合は画像に付属している情報を削除するという点です。やり方は検索すれば出てきますので省略しますが、こうするとバイト数も減るはずですし、今回のような問題も起きません。

以下の４枚の写真をよく見てください。違いがわかりますか？

ディスプレーの上下がありますので、順序を逆にして表示します。

これは小生がiPadで撮った庭の写真ですから写真としてはまずいものですが、どの写真も同じように見えませんか？

いずれもこのページでは中サイズ、すなわち300×300で表示させています。しかし、すべてサイズや解像度が違う写真です。オリジナルの画像を画像処理ソフトでリザイズしています。画像をクリックすると元の画像が表示されますからわかるはずです。
では、なぜこんなことをしたかというと、今サポートしているサイトで多くの画像を扱っていて提供された画像がサイズも解像度もばらばらで、その画像を統一する必要があったからです。どの程度がいいか考えたわけです。
もう少し具体的に説明すると上の画像はそれぞれ以下のサイズと解像度を持っています。

1. 1936×1936　72dpi  811kb
2. 640×640　72dpi  131kb
3. 320×320  72dpi  40.3kb
4. 1939×1936　320dpi  811kb

こう見ると、実はweb上の画像に基本的に解像度は関係がないということがわかります。なぜなら解像度は印刷と印刷サイズに関係があるが、もともとたかだか300ピクセルぐらいの幅でしか表示しないわけだからだ。
従ってバイト数の少ない3番目の画像で充分だということになる。ただ、ここで問題なのはいわゆるスマホ等の解像度だ。iPhoneなどが採用しているRetinaディスプレーだ。このディスプレーはデバイスが持っている解像度と実際の（cssのというか）解像度が違うため、簡単に言うと2倍のサイズの画像が必要だということらしい。（このブログをRetinaディスプレーで見て比べてください）このあたりはよくわからないしややこしいので以下を見ていただければと思います。
Rriver：いまさら聞けないRetina対応のための「ピクセル」の話
結論。画像は2番目の「640×640　72dpi  142kb」で行くことにします。

前回書いたxmlを使ったページについてここでサンプルを示す。
まずはhtml

いたってシンプル。asideの一覧すなわちulのところに見出しを出力して、そこにオンクリックでarticlのところに表示するというもの。
ここはデータが何もなくていい。
そして、スクリプト。以下

まず、function xmlpreLoad()で見出しに必要な要素をつかまえて、htmlを繰り返し生成する。これでasideの見出しができる。
次は見出しがonclickされた時に実行されるスクリプトfunction xmlLoad(index)だ。
実はここがよくわかっていない小生が苦労したところ。
indexを引数にして、ここから１を引いた数を変数noに代入して、それを変数の順番としてeqで取り出す。
そうするとクリックされたデータを取得できる。これでhtmlを生成するというわけだ。

xmlのデータは例のエクセルからMr.DataConverterを使って作ったものだ。

こうするとユーザーがなれたエクセルでデータをつくれば、ウェブページに表示できる。これは便利でしょ。
もちろんいろいろな応用が効きますね。たとえば商品一覧を作るだとか。
あとはhtmlとデザインのcss次第です。

サンプルは以下。表示されている文字列をクリックしてみてください。

http://ogu-tec.net/test/webtestxml04/

xmlを使ってhtmlを自動化するのは便利だけでなく、ユーザーがデータ入力したものをいわばそのまま使うことができる。しかもxmlファイルはエクセルと相性がいい、はずだった？

ところが、mac版だけなのか、2016のエクセルでxmlファイルが上手く読めないし、書き出せない。方法はあるのかもしれないが、わからない。そこで色々調べてみた。

出会ったのがこのMr.DataConverterだ。これはウエッブサイト上のツールで、エクセルのデータをコピペすると、いろいろなデータソースに変換してくれる。

以下がエクセルのファイル。これのデータ部分をコピーする。

そして、Mr.DataConverterにデータの方を選択して貼り付けると、以下のように変換してくれる。

これをコピーして、エディタに貼り付けて、xmlとして保存してやればいい。
これなら、データを普通のスキルがあれば作れるし、たとえば大量のデータをウェブ上に表示するとき便利だ。
このサイトは以下
https://shancarter.github.io/mr-data-converter/
xmlを使ったサイトのサンプルは次の投稿で。

はじめに

無償Windows10へのアップグレードの期間が２ヶ月を切った。そこでこの件についてサイト上の情報や経験も含めまとめてみた。
実は５月になってマイクロソフトは自動アップグレードという暴挙？にでた。何もしなくても自動アップデートを設定していると、いつの間にかWindows10へのアップグレードが実行されてしまうという現象が起こっている。実際我が家でもかみさんのPCで起こった。すぐに戻したが、娘のところのPCは一ヶ月を過ぎたところで言ってきたので戻すことができず、しかもこれが原因かどうかはっきりしないがさまざまな不具合がおき大変なことになった。結局はいろいろやって修理したのだが、同様に苦労されている方も多いと思う。そこで、現状での対策についてまとめてみた。

OS（オペレーティングシステム）のアップグレードは大変なことなのだ

パソコンを動かす基本ソフトであるOSと呼ばれているソフトを大きく変えるということは大変なことだということを先ずは認識するべきだ。これによって動かなくなるアプリもあれば、デバイスもある。パソコンで使うソフト（アプリ）やデバイス（プリンタとかディスプレーや通信機器等）はすべてプログラムで動いている。しかもそのプログラムはOS（オペレーティングシステム）を使って、その仕様に基づいて作られているからだ。
つまりOSを変更すると動かなくなる可能性があるということだ。

先ずはどうする（調べる）

先ずは今使っているパソコンがWindows10に対応しているか調べることだ。もし自動でアップグレードされてしまい、何らかの不具合が起きた場合も調べておく必要がある。基本的にWIN７以降であればOKと思われがちだが、かならずしもそうは言えない。どう調べるか？メーカーのパソコンを使っている人がほとんどだろうから、メーカーのサイトでWindows10に対応するか情報を得ることができるはずだ。

次は転ばぬ先の杖を作る（リカバリーディスクとバックアップ）

ここはちょっとハードルが高いのだが、今使っているPCのリカバリーディスクを用意することとデータをバックアップすることだ。元々リカバリーディスクが添付されているPCが意外とすくなくなっているが、あればいいが、なければリカバリーディスクの作り方が資料としてあるはずだ。資料がなければこれもメーカーのサイトで調べよう。もう一つはデータだ。これは外付けのHDDを用意してコピーしておくのが手っ取り早い。SSDの（小型の）外付けHDDは最近かなり安くなっているので大容量のものを購入しよう。（将来的にも使い続けられる）また、パソコンがまったく動かなくなってしまった場合でもHDDさえ生きていればデータは救い出せることも知っておくべきだ。（この件ついては別の記事）

転ばぬ先の杖を作る２（ソフトウエアとその情報の記録）

ここで忘れてはならないのは今使っているソフトウエアの導入媒体（CDやDVD）、それにその情報の管理だ。初期状態に戻すのがリカバリーだが、その後に導入したソフトウエアは戻らない。再び導入しなくてはいけない。そこでこれが必要となる。特に大事なのはそのプロダクトIDやメール等でのパスワードだ。特にマイクロソフトの製品（OSも含め）はプロダクトIDが大事だ。これさえあれば媒体がなくとも何とかなる可能性があるからだ。もしわからなければ調べてみる。（調べる方法はネット上に情報があるので省略するが「プロダクトID　調べる方法」と検索すれば出てくるはずだ）ともかくこうした物や情報をそろえて置くことが大事だ。

ここからはケースによって対応が違う

1. Windows10へのアップグレードをして、快適に動いている場合
   問題ないですね。ハッピーです。Windows10は8.1より使いやすくできていますからいいです。ただ、上に挙げた「転ばぬ先の杖を作る」は実行しておくといいです。
2. Windows10へのアップグレードが行われて一ヶ月以内の場合
   戻すことをお勧めします。戻す方法についてはネットで検索すれば出てきます。実は一回無償アップグレードすると、後日（無償期間が終了した場合でも）無償でアップグレードできるからです。（ということは一回はやっておくべきことになります。）そしてアップグレードへの促しを拒否します。この方法ついては検索で「「Windows 10」の更新通知の非表示・削除・アンインストール方法」とか入力して調べてください。
3. Windows10へのアップグレードが行われて一ヶ月以降で何らかの不具合がある場合
   これが問題です。基本的にリカバリーすべきです。これには「転ばぬ先の杖を作る」が必要です。これがない場合はしてはいけません。先ずは「転ばぬ先の杖を作る」、特に２で書いた点を用意してください。

Windows10へのアップグレードはクリーンインストールで

実は現状のPCのまま、OSを入れ替えるというのは至難の業。マイクロソフトはいつもこうした十字架を背負わされていて気の毒な気もするが、ともかく不具合が起きやすいのだ。そこで、何らかのトラブルが起きた場合ややはりアップグレードしたい場合は、パソコンをまっさらにしてWindows10を導入するのがお勧めだ。その方法についてはこれまで実際に娘のパソコンで実施したことを書いてきたが、ここではなるべく汎用的に書いてみる。

1. 「転ばぬ先の杖を作る」を実行
2. リカバリーを実行（その際HDDをまっさらにして行う）
   メーカーによってリカバリーの方法がまちまちだろうが、HDDの初期化というオプションがあるはずなのでそれを行って実施する。8.1などのOSのディスクを持っている場合は当然だが、CDなりDVDなりのディスクを入れてパソコンを起動して実施する。
   この際ネットワークに接続できること、DVDに書き込みができるドライブがあること、もしくはUSBで起動できるパソコンであることが条件になる。（そもそもこれがない場合はWindows10にするべきではないPCといえます。）
3. マイクロソフトの以下のサイトに行ってプロダクトIDディスク作成ツールをダウンロードして実行
   https://www.microsoft.com/ja-jp/software-download/windows10
   ここにあるツールをダウンロードして(「ツールを今すぐダウンロード」をクリック）実行する。
   このツールではisoファイルという特殊なファイルをUSBかDVDに焼くように促されるのでどちらかを選んで実行する。すなわちこのisoファイルがWindows10のインストールディスクだ。
4. 今度は作成したWindows10のインストールディスクでパソコンを起動
   （デスクトップなどはネットワークアダプタ等をつないでおくことも肝心）そうすると先ずはプロダクトIDの入力画面となる。実はここは入力しない（すなわち「持っていない」を選択）でもかまわないという情報がネット上にあったが、自分の場合導入後うまく認証ができなかったので、今使っている8.1などのプロダクトIDを入力する。あとはHDDの初期化は行わず、しかしデータとは残さないオプションを選んでいけばいい。
5. Windows10のインストールができたら「設定」のところの「セキュリティ」設定のところで認証を確認する。また、エラー表示が出ないかしばらく確認しておく。
6. 問題がなければ使用しているソフトウエアを導入していく。