PDFを画像変換、リサイズしてから再びPDFに変換、、、

• 渡されたPDFファイル、ページ毎のサイズが違う。
• ミッションは、閲覧用にページのサイズを揃えなくてはいけないこと、そしてPDFのファイルサイズを小さくすること。
• どのようなワークフローがいいのか、、、
• 分からないときは実験する。

実験

• オリジナルのPDFファイルを画像に変換する。
• 変換する形式は、JEPG、PNG、TIFFの３種類。
• 設定は基本的にいじらない。
• 但し、変換のカラースペースは「RGB」
• 解像度は118.11px/cmで共通にする。

•  で、どうなるのか？？

単純に画像に変換する

•  元ファイルの容量＝67,612
• jpeg=5,722
• png=9,648
• tiff=30,810
• 変換した画像の解像度を調べたところ、すべて同じでした。
• この時点ですでに差があります。

変換した画像をリサイズする。

• 画像の解像度がどのファイルも同じだったので、同じようにサイズを縮小してみました。その結果。()の中は縮小前のサイズ。
• jpeg=12,073(5,722)
• png=12162(9,648)
• tiff=15,508(30,810)
• 画像のサイズを小さくするのだから、ファイルサイズは当然小さくなるものだと思っていました。
• サイズが小さくなったのはtiffのみ。
• jpegに至ってはファイルサイズが倍以上。

リサイズした画像を再びPDFに変換する。

• 今回はファイルサイズを小さくするという目的もあるので、PDF化に際しては最適化を行う。「モバイル」に最適化しました。
• 結果は以下の通り。
• jpg=604
• png=603
• tiff=600
• ３つともファイルサイズは変わりませんでした。
• サイズを縮小しすぎたのでしょう。画質（解像度も差がありません）
• ファイルサイズの境界域では差がつくと思われます。 

 境界域かどうかわかりませんが、☟こんな条件でPDFにしてみます。

 すると、、、

• jpg=1588
• png=1502
• tiff=1057
• いろいろと差がついてきます。
• ただし、TIFFの処理は相当重たいです。

 最適化しないでPDFにしてみる。

• jpg=10008
• png=1974
• tiff=1057
• tiffは最適化してもしなくてもファイルサイズが変わりません。
• jpegはなんでしょうか？

結論

• tiffは処理が非常に重たいので避けたい。
• jpegはファイルサイズがプロセスによって予測不可能。
• pngが一番安定しているのかも。
• ただし、元になるPDFがどのようなファイルなのかによって結果は大きく異なるように思う。
• 自身のワークフローに沿って作業をした結果、うまくいかないときは別のオプションを試してみる、ということでしょうか。

追記

• PDFのファイルサイズについて 02 - webかたつむりを踏まえて再実験。
• 最初にオリジナルのPDFを最適化してしまう。67613→540
• 最適化したPDFをPNGに画像変換。540→5174(最適化しない場合9648)
• PNGをリサイズする5174→8477（最適化しない場合12162）
• PNGをPDFに変換（最適化する）714（最適化しない場合1974）
• ということでこれが現時点での結論。
• つまり、画像として表示することが目的のPDF（編集機能、メタデータなど周辺情報を一切保持する必要がないということ）は最初に最適化することでデータ容量を思い切り削ることができます。

クリックすると画像が置換する

• クリックすると画像が置換する
• 3枚の画像をクリックするたびに置換する。
• ループにする。

<script>

var images = new Array();
images[0]= 'images/d1.jpg';
images[1]= 'images/d2.jpg';
images[2]= 'images/d3.jpg';

var i = 0;
function changeImg(){
if(i==2){
i=0;

// i==2の時は、iに０を代入する。
var pic = document.getElementById('pic');
pic.src= images[i];
}else{
i++;
var pic = document.getElementById('pic');
pic.src= images[i];
}
}

</script>

1/8追記

<script>
var pic = new Array();
pic[0]='images/d1.jpg';
pic[1]='images/d2.jpg';
pic[2]='images/d3.jpg';

var i = 1;

function imgChange(){
if(i == pic.length){
i=0;
var picture = document.getElementById('picture');
picture.src = pic[i];
i=1; //この条件が必要
}else{
var picture = document.getElementById('picture');
picture.src = pic[i];
i++;
}
}
</script>

更新用タイマー なんとなくよさそうです、、、保証なし

<script>
/*URLの配列*/
var url = new Array;
url[0] = 'index.html';
url[1] = 'index_new.html'; //変更後のURLを入力する。


/*日付の配列*/
var date = new Array;
date[0] = new Date(1970, 00, 01, 00, 00, 0000);
date[1] = new Date(2017, 00, 05, 22, 30, 0000);
//変更する時間を入力する。「月」の入力に注意する。

月の入力は「月の値」－１になります。

newDate();にしなくてはならないことに気が付く、までに時間がかかる、、、

配列の１番目は基準となる値にするといいのかな？


/*現在時刻*/
var now = new Date();
var nowTime = now.getTime();

getTime();は1970年1月1日0時0分からの時間をmsで計測した値の数値を返す。

/*関数の設定*/
var j = 0;
function changeUrl(){
for(i=1; i<=(date.length-1); i++){

// すでにi=0の状態なのだから、カウントは1から始めればよい。このことは応用範囲が広いように思う。割と重要！
var triggerTime = date[i].getTime();
if(nowTime >= triggerTime){
j++;

//　iを使ってうまく取り廻せないときは、新たな変数を宣言してしまう。
var jumpUrl = url[j];
location.href = jumpUrl;
}
}
}

/*関数の呼び出し*/
changeUrl();

</script>

javascript location object

• window.location
• window.location.href
• window.location.pathname

window.prompt(); window.confirm();の戻り値

window.prompt();

<script>

var thisYear = window.prompt('今年は西暦何年？');
console.log(typeof thisYear);
</script>

•  テキストボックスに入力しても、しなくても（空文字列でも）戻されるのは。string。入力しない場合はからの文字列。
• cancelをクリックすると、戻されるのは「object」。

window.confirm();

<script>
var thisYear = window.confirm('今年は2017年ですか？');
console.log(typeof thisYear);
console.log(thisYear);
</script>

•  戻ってくる値は「boolean」

jsの練習

おみくじ 

<script>
var num;
num= Math.floor(Math.random()*100+1);
console.log(num);
if(num == 77 || num==100){
document.write('大吉');
}else if(num%10==3 || num%10==5 || num%10==7){
document.write('中吉');
}else if(num%10 == 4){
document.write('凶');
}else{
document.write('小吉');
}
</script>

和暦 

<script>
var heisei;
var fullyear;
var now =new Date();
var fullyear = now.getFullYear();
console.log(typeof fullyear);
var heisei = fullyear -1988;
document.write('今年は平成'+heisei+'年です。');
</script>

• typeof　は演算子。
• getFullYear();の戻り値は、number型

string+number

<script>
var str = 'string';
var num = 100;
console.log(typeof str);
console.log(typeof num);
var add = str + num;
console.log(typeof add);
</script>

•  異なる型の連結。文字列と数値を「＋」で連結すると数値は文字列に変換されます。

関数　引数

<script>
function multiply(a, b){　/*変数a,bを宣言しない、引数として記述する*/
var m =a*b;
document.write(m);
}
multiply(5, 6);/*関数を呼び出す。引数を入力する*/
</script>

• 引数とはなんぞや？たぶん、関数の処理過程で必要になる変数のことだ。

変数のスコープ

<script>
function summary(){
var i;
var total=0;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
document.write(summary());
</script>

• 変数totalは関数summaryの内部で宣言したから、document.write(total);としても、なにも戻ってこない。
• では、単純にvar totalを関数の定義より前に宣言してみるとどうなるのか？

<script>
var total=0;
function summary(){
var i;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
summary();
document.write(total);
</script>

• document.write(); の前に、関数summary();を呼び出す。
• これでもきちんと値が戻ってくる。
• なるほど！これが「変数のスコープ」というやつだ。

 <script>
function summary(){
total = 0;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
summary();
document.write(total);
</script>

ちなみに、var宣言しないとグローバル変数になるので、上のケースでも大丈夫。

java script練習帳

javascriptは大文字と小文字を区別する。

これを間違えるといっさい動きません。

変数の定義もすべてcamelCaseで記述してみようと思う。

innerHTML =　

すべて大文字

document内部の各要素には必ず「innerHTML」propertyが存在する。

「Html」と記述して、迷路に迷い込んだ、、、ことを忘れずに。

getElementById();

IDはdocumentに対して１つしかないからElement

対象となる「html要素」をオブジェクト（インスタンス）にする。

そのオブジェクトに対して操作をする。

getElementsByTagName();  

TagNameはドキュメントに複数存在するからElements

このメソッドによる戻り値は配列になる。

var a = document.getElementsByTagName();

a[0]とは、該当するタグの一番初めに記述されているものを指す。

getElementsByClassName();

TagName同様複数存在する

class instance

クラスとオブジェクトとインスタンスの関係 - Qiita　からの転記。

クラスとインスタンス

クラスは設計図で、インスタンスはその設計図を実体化したもの
(実体化することをインスタンス化という)。

例えば、人間という言葉を想像した時に、思い浮かべるものは、特定の誰かではなく、漠然とした人間を思い浮かべる。ただ、自分も人間だし、自分の友達や親も人間である。
この始めに思い浮かべた人間がクラスで、自分のと友達や親といった実体があるものがインスタンスと考えてもよい。

オブジェクト指向

オブジェクト指向とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方。
このオブジェクト指向によって、考えられたのが、クラスやインスタンス。

人クラス、猫クラス、家クラスなどそれぞれクラスを用意することで、それぞれの振る舞いをとらえることができるようになる。なので、クラスはオブジェクトである。

同様に、自分インスタンス、自分が飼っている猫インスタンスなどそれぞれのインスタンスを用意することで、それぞれの振る舞いをとらえることができるようになる。なので、インスタンスもオブジェクトである。

まとめる

まとめると
・クラスはオブジェクトである。
・インスタンスはオブジェクトである。
・クラスをインスタンス化したものがインスタンス。
(クラスは設計図でインスタンスは実体化される。)

オブジェクト指向の考えに則って作られたのがクラスとインスタンスです。
結局、クラスもインスタンスもオブジェクトなのです。

5分で絶対に分かる：5分で絶対に分かるオブジェクト指向 (5/6) - ITmedia エンタープライズからの転記。

－ クラスとインスタンス

　同じ種類のオブジェクトをまとめて考えると便利です。これをクラス――classと呼びます。クラスとはオブジェクトの抽象概念です。例えば自分と家族のPさん、Qさん、Aさんや同僚のBさんなど人間オブジェクトの抽象概念を「人」というクラスにします。自分の勤務先O社や妹の勤務先U社など個々の会社の抽象概念を「会社」というクラスにします。

　インスタンス――instanceの言葉の意味は例です。for instanceは「例えば」です。クラスに属するオブジェクトをインスタンスと呼びます。例えばクラス「人」のインスタンスは自分や家族のPさん、Qさん、Aさんや同僚のBさんです。クラス「会社」のインスタンスはP社やU社です。

　インスタンスとオブジェクトは同じ意味で使われる場合が多いですが、インスタンスといった場合は必ずクラスを意識しています。つまり、インスタンスはあるクラスに属するオブジェクトの具体例だからです。

図4 クラス（抽象概念）とインスタンス（具体例）

 

 

Date object

注意すること

1. getFullYear();    西暦表示はgetYearではない。
2. getMonth();　　1月は「０」。配列の一番目。
3. getDay();　は変換しないといけない。配列の一番目は日曜日。

Date object

•  getYearメソッドは、1900年に対して加減算する。
• 今年は１１７つまり１９００＋１１７＝２０１７という具合。
• 2000年問題の根本？
• いずれにせよもう使わない。
• get FullYearを使う。

 getFullYear

• new演算子を使って、新しいオブジェクトを生成する。
• new Date(); とは新しい「Dateオブジェクト」を生成したということ。
• 生成されて、利用可能（＝インスタンス）になる。（どの、いつの、dateなのかパラメータによって指定されると使用可能になるのか？ちなみに括弧の中が空欄の時は現在時刻！）
• ある値によって生成された「dateオブジェクト」から、「西暦」「月」「日」など、部分の情報（そのオブジェクトに含まれるプロパティー？？なのか）を抽出する作業。
• その抽出する処理＝関数がメソッド。
• getFullYear()メソッド。

 new Date(); と Date(); の違い

• new演算子を使わない、Date();は　現在時刻を表す文字列を生成する。オブジェクトではない。

170103追記

<script>
var now = new Date();
document.writeln(now);
var year = now.getFullYear();
document.writeln(year+'年');
var month = now.getMonth()+1;
document.writeln(month+'月');
var date = now.getDate();
document.writeln(date+'日');
var hour =now.getHours();
document.writeln(hour+'時');
var minute = now.getMinutes();
document.writeln(minute+'分');
var day = now.getDay();
var youbi = new Array ('日','月','火','水','木','金','土');
console.log(youbi);
var youbi = youbi[day];
document.write(youbi+'曜日');
</script>

sp movie

スマートフォンで動画の反省点。同じ轍を踏まないための備忘録

• spブラウザーでの使用で、html5 videoタグを使用すると、autoplayにならない。自動再生するためには他の方法を用意しておかなくてはいけない。写真のフェードイン、フェードアウトであれば、代案がいくつか思いつく。
• そこでCSS3のアニメーションを使った方法を試してみる。自分が所有するiphone-6ではうまく再生できた。ここでの油断が命取り、、、
• iphone-5では「かくかく」した動きになり、まったく見られたものではなかった。同様の症状が軽いながら、android（sony）でも見られた。

• 結局、フェードインアウトの写真であればjqueryのプラグインが一番軽くて動きも問題ないという、、、しょうもない結果の終わる。
• 早くビデオタグを使ってガンガン動画を埋め込みたいものです。
• 使用したプラグイン☞

  slick - the last carousel you'll ever need

qiita.com