webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

PDFのファイルサイズを縮小する 01

Acrobatヘルプ | PDF のファイルサイズを小さくする方法 (Acrobat DC)

このところPDFのファイルサイズについて、いろいろ考えていたが、このADOBEの文書が参考になると思ったので転載。(必要な時にすぐ検索用)

 

PDF文書の構成要素を調査する

  • 「表示」「表示切替」「ナビゲーションパネル」「コンテンツ」

f:id:ohta-felica:20170107204313p:plain

 

f:id:ohta-felica:20170107204419p:plain

 

f:id:ohta-felica:20170107204552p:plain

 

- 画像パネル

PDF の最適化の画像パネルを使用すると、カラー画像、グレースケール画像、白黒画像の圧縮および画像のダウンサンプルのオプションを設定できます。画像の解像度を低くしたり、圧縮することでファイルサイズを小さくできます。

  • ダウンサンプル
    画像の解像度を低くすることによってファイルサイズを縮小する方法です。この場合、元のカラーピクセルを結合して大きいピクセルが生成されます。
  • 圧縮
    不要なピクセルデータを除去することによってファイルサイズを縮小します。一般に、写真などのカラーグラデーションを含む画像に対しては、JPEG 圧縮および JPEG2000 圧縮を使用すると高い圧縮率が得られます。広い領域が単色で塗りつぶされているイラストや、単色の組み合わせで構成されたパターンには ZIP が適しています。白黒画像の場合は、CCITT より JBIG2 圧縮が適しています。PDF の最適化では JBIG2 圧縮を使用できますが、Distiller では使用できません。

 

- フォントパネル

PDF 作成環境にあるフォントと同じフォントが PDF の配布先の環境にインストールされている場合は、フォントを埋め込む必要がないことがあります。完全に一致させる必要はない場合は、フォントを埋め込まないことでファイルサイズを小さくすることができます。

注意:

注意 : 元の文書と完全に一致させるには、文書内で使用されているすべてのフォントを埋め込むことをお勧めします。

 

 

- 透明パネル

PDF に透明効果を含むアートワークがある場合、PDF の最適化の透明パネルのプリセットを使用して、透明効果を統合してファイルサイズを小さくできます(分割・統合により、透明部分は、ベクトルベースの領域とラスタライズされた領域に分けられ、対応するアートワークに組み込まれます)。

 

- オブジェクトを破棄パネル

PDF から削除するオブジェクトを指定し、CAD 図面の曲線を最適化できます。Acrobat DC およびその他のアプリケーションで作成されたオブジェクトを破棄できます。オブジェクトを選択すると、PDF内に出現するそのオブジェクトがすべて削除されます。「破棄するオブジェクトの設定」セクションでは、次に示すオプションやその他のオプションを選択できます。

  • フォームの送信、取り込み、およびリセットのアクションをすべて破棄
    フォームデータの送信または取り込みに関連するすべてのアクションを無効にし、フォームフィールドをリセットします。
  • フォームフィールドを統合
    表示方法を変えることなく、フォームフィールドを使用不可にします。フォームデータはページに結合され、ページコンテンツになります。
  • すべての JavaScript アクションを破棄
    JavaScript を使用している PDF 内のアクションをすべて削除します。
  • すべての代替画像を破棄
    画面表示用の画像を除き、画像のすべてのバージョンを削除できます。一部の PDF には、低解像度での画面表示や高解像度での印刷などの様々な目的に対応するために、同じ画像の複数のバージョンが含まれています。
  • 埋め込まれたサムネール画像を破棄
    埋め込まれたサムネール画像を削除できます。「ページサムネール」ボタンをクリックした後、サムネールの描画に時間がかかるサイズの大きい文書では、このオプションは便利です。このチェックを入れて PDF 変換すると、サムネールは埋め込みされませんが、ファイルサイズを小さくすることができます。
  • 文書タグを破棄
    文書からタグを削除できます。このオプションを選択すると、テキストのアクセシビリティと折り返し機能も削除されます。
  • 曲線のコントロールポイントを減らす
    CAD 図面で曲線の作成に使用されるコントロールポイントの数を削減できます。この結果、PDF ファイルのサイズが小さくなり、画面のレンダリングが高速になります。
  • 画像のフラグメントを検出して結合
    薄いスライスにフラグメント化された画像またはマスクを探し、それらのスライスを 1 つの画像またはマスクに結合するよう試みることができます。
  • 埋め込まれた印刷設定を破棄
    文書に埋め込まれた印刷設定(ページの拡大 / 縮小や両面印刷モードなど)を削除します。
  • 埋め込まれた検索用インデックスを破棄
    埋め込まれた検索用インデックスを削除します。これによってファイルのサイズが小さくなります。
  • しおりを破棄
    PDF からすべてのしおりを削除します。

 

- ユーザーデータを破棄パネル

配布したり他の人と共有したくない個人情報を削除できます。個人情報が見つからない場合は、非表示になっている可能性があります。「文書の検査」コマンド(ツール/墨消し/非表示情報を検索して削除)を使用して、非表示のテキストおよびユーザー関連情報を検索することができます。

  • すべての注釈、フォーム、マルチメディアを破棄
    PDF からすべての注釈、フォーム、フォームフィールドおよびマルチメディアを削除します。
  • 文書情報とメタデータを破棄
    文書情報辞書およびすべてのメタデータストリーム内の情報を削除します(「名前を付けて保存」コマンドを使用して、メタデータストリームを PDF のコピーに戻します)。
  • すべてのオブジェクトデータを破棄
    PDF からすべてのオブジェクトを削除します。
  • 添付ファイルを破棄
    注釈として PDF に追加された添付ファイルを含めて、すべての添付ファイルを削除します(PDF の最適化では、添付ファイルは最適化されません)。
  • 外部相互参照を破棄
    他の文書へのリンクを削除します。PDF 内の他の場所にジャンプするリンクは削除されません。
  • 他のアプリケーションのプライベートデータを破棄
    その PDF 文書を作成したアプリケーションでしか使用しない情報を文書から削除できます。これによって PDF の機能が影響を受けることなく、ファイルサイズが小さくなります。
  • 非表示レイヤーの内容を破棄し、表示レイヤーを統合
    ファイルサイズを縮小できます。最適化された PDF 文書は元の PDF と同じように見えますが、レイヤー情報を含まない文書となります。

 

- 最適化パネル

最適化パネルでは、不要な項目を文書から削除できます。例えば、古くなった要素や、文書の使用目的に合わない項目を削除できます。特定の要素を削除すると、PDF の機能に重大な影響を与えることがあります。デフォルトでは、機能に影響を与えない要素だけが選択されています。オプションの削除による影響を十分に理解していない限り、デフォルトの設定を使用してください。

  • オブジェクト圧縮オプション
    ファイルで Flate 圧縮を適用する方法を指定します。
  • エンコードされていないストリームに Flate 圧縮を使用
    エンコードされていないすべてのストリームに Flate 圧縮を適用します。
  • LZW エンコーディングを使用するストリームで Flate 圧縮を使用
    LZW エンコーディングを使用するすべてのコンテンツストリームおよび画像に Flate 圧縮を適用します。
  • 無効なしおりを破棄
    削除された文書内のページをポイントするしおりを削除します。
  • 無効なリンクを削除
    移動先が無効なリンクを削除します。
  • 参照していない移動先を削除
    PDF 文書内から参照されていない移動先を削除できます。このオプションは、他の PDF ファイルや Web サイトからのリンクをチェックしないので、一部のワークフローには適さない場合があります。
  • ページコンテンツを最適化
    すべての行末文字をスペース文字に変換します。この結果 Flate 圧縮が向上します。
  • PDF を Web 表示用に最適化
    PDF 文書を再構成し、Web サーバーから 1 ページ単位でダウンロード(バイトサービング)できるようにします。

 

F. その他

以下の操作を行うことで、既存の PDF ファイルのファイルサイズを小さくすることができます。

f-1. PDF ファイルを別名で保存する

作成した PDF ファイルを Acrobat でリンク設定などの編集を加えた後に保存しなおす際、「(上書き)保存」で上書き保存を繰り返すと、ファイルサイズが大きくなってしまう場合があります。その場合は、「上書き保存」のかわりに、「名前を付けて保存」を実行します。

f-2. PDF ファイルを分割する

PDF ファイルを 2 つ以上のファイルに分割します。ファイルが複数に分かれますが、1 つずつのファイルサイズは小さくなります。PDF ファイルの分割方法については、以下のページを参照してください。

f-3. 不要なページを削除する

PDF ファイル中に白紙のページなど不要なページがある場合は、それらのページを削除します。PDF ページの削除方法については、以下のページを参照してください。

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

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

実験

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

f:id:ohta-felica:20170107145006j:plain

 

f:id:ohta-felica:20170107145121j:plain

 

f:id:ohta-felica:20170107145144j:plain

  •  で、どうなるのか??

f:id:ohta-felica:20170107150852p:plain

単純に画像に変換する

  •  元ファイルの容量=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
  • 3つともファイルサイズは変わりませんでした。
  • サイズを縮小しすぎたのでしょう。画質(解像度も差がありません)
  • ファイルサイズの境界域では差がつくと思われます。 

f:id:ohta-felica:20170107151222j:plain

 

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

f:id:ohta-felica:20170107151901p:plain

 すると、、、

  • 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(編集機能、メタデータなど周辺情報を一切保持する必要がないということ)は最初に最適化することでデータ容量を思い切り削ることができます。

f:id:ohta-felica:20170107212612p:plain

 

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

  • クリックすると画像が置換する
  • 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に0を代入する。
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);
//変更する時間を入力する。「月」の入力に注意する。

月の入力は「月の値」-1になります。

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

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


/*現在時刻*/
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>

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

window.prompt();

<script>

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

 

f:id:ohta-felica:20170105093421p:plain

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

window.confirm();

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

 

f:id:ohta-felica:20170105212434p:plain

  •  戻ってくる値は「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型

f:id:ohta-felica:20170103213818p:plain

 

f:id:ohta-felica:20170103213948p:plain

 

 

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>

 

f:id:ohta-felica:20170104105440p:plain

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

関数 引数

<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に対して1つしかないから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社です。

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

ALT図4 クラス(抽象概念)とインスタンス(具体例)
 
 

Date object

注意すること

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

Date object

f:id:ohta-felica:20170102141221p:plain

 

f:id:ohta-felica:20170102141257p:plain

 

f:id:ohta-felica:20170102141918p:plain

  •  getYearメソッドは、1900年に対して加減算する。
  • 今年は117つまり1900+117=2017という具合。
  • 2000年問題の根本?
  • いずれにせよもう使わない。
  • get FullYearを使う。

f:id:ohta-felica:20170102142042p:plain

 

f:id:ohta-felica:20170102141854p:plain

 getFullYear

f:id:ohta-felica:20170102142430p:plain

 

f:id:ohta-felica:20170102142538p:plain

 

f:id:ohta-felica:20170102142512p:plain

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

f:id:ohta-felica:20170102151519p:plain

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

f:id:ohta-felica:20170102180657p:plain

 

 

f:id:ohta-felica:20170102180728p:plain

  • 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>