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

webかたつむり

ウェブデザインを勉強中

アコーディオンメニュー js

function showHide() {
var para1 = document.getElementById('news1Paragraph');
var para2 = document.getElementById('news2Paragraph');

para1.style.display = 'block';
para2.style.display = 'none';

var title1 = document.getElementById('news1Title');
var title2 = document.getElementById('news2Title');

title1.onclick = function () {
para1.style.display = 'block';
para2.style.display = 'none';
};

title2.onclick = function () {
para1.style.display = 'none';
para2.style.display = 'block';
};

}

document.ready = showHide();

  • ローカル変数を使うように意識する。
  • DOMは変数にして使いまわす。(負荷が大きいため)
  • DOMを使うときは、ソースの読み込みをbodyの閉じtagの直前にする。

 

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

 HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOM display</title>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div id="whatsnew">
<h1><img src="images/whatsnew.png" alt="最新情報"></h1>


<div class="section first">
<h2 id="news1Title">方丈記<br>【ゆく河の流れ】</h2>

<p id="news1Paragraph">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え、かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と、栖(すみか)とまたかくのごとし。<br>
たましきの都のうちに、棟を並べ、甍(いらか)を争へる、高き、いやしき、人の住ひは、世々を経て尽きせぬものなれど、これをまことかと尋ねれば、昔ありし家は稀(まれ)なり。或は去年(こぞ)焼けて、今年作れり。或は大家(おほいへ)亡びて小家(こいへ)となる。住む人もこれに同じ。所も変らず、人も多かれど、いにしへ見し人は、二三十人が中(うち)に、わづかにひとりふたりなり。朝(あした)に死に、夕(ゆふべ)に生るるならひ、ただ水の泡にぞ似たりける。<br>
知らず、生れ死ぬる人、何方(いずかた)より来たりて、何方へか去る。また知らず、仮の宿り、誰(た)が為にか心を悩まし、何によりてか目を喜ばしむる。その主と栖と、無常を争ふさま、いはばあさがほの露に異ならず。或は露落ちて花残れり。残るといへども朝日に枯れぬ。或は花しぼみて露なほ消えず。消えずといへども夕を待つ事なし。</p>
</div><!--section first-->


<div class="section second">
<h2 id="news2Title">方丈記<br>【安元の大火】</h2>

<p id="news2Paragraph">予(われ)、ものの心を知れりしより、四十(よそぢ)あまりの春秋(しゅんじう)をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。<br>
去(いんし)、安元三年四月(うづき)廿八日かとよ。風烈(はげ)しく吹きて、静かならざりし夜、戌(いぬ)の時(とき)許(ばかり)、都の東南(たつみ)より火出で来て、西北(いぬゐ)に至る。はてには朱雀門大極殿・大学寮・民部省などまで移りて、一夜のうちに塵灰(ちりはい)となりにき。<br>
火(ほ)もとは、樋口富(ひぐちとみ)の小路(こうじ)とかや。舞人(まひびと)を宿せる仮屋より出で来たりけるとなん。咲き迷ふ風に、とかく移りゆくほどに、扇(あふぎ)をひろげたるがごとく末広になりぬ。遠き家は煙(けぶり)に咽(むせ)び、近きあたりはひたすら焔(ほのほ)を地に吹きつけたり。空には灰を吹き立てたれば、火の光に映じて、あまねく紅(くれなゐ)なる中に、風に堪へず、吹き切られたる焔、飛ぶが如くして一二町を越えつつ移りゆく。その中の人、現(うつ)し心あらむや。或(あるい)は煙に咽びて倒れ伏し、或は焔にまぐれてたちまちに死ぬ。或は身ひとつ、からうじて逃るるも、資財を取り出づるに及ばず。七珍万宝さながら灰燼(くわいじん)となりにき。その費え、いくそばくぞ。そのたび、公卿の家十六焼けたり。ましてその外、数へ知るに及ばず。惣(すべ)て都のうち、三分が一に及べりとぞ。男女死ぬるもの数十人、馬・牛のたぐひ辺際を知らず。<br>
人の営み、皆愚かなるなかに、さしも危ふき京中の家をつくるとて、宝を費し、心を悩ます事は、すぐれてあぢきなくぞ侍る。</p>
</div><!--section2-->
</div><!--whatsnew-->
<script src="script.js"></script>
</body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */

/*reset
--------------------------------*/
h1, h2, h3, p{
margin: 0;
padding: 0;
line-height: 1.5;
height: auto;
}
#whatsnew{
width: 398px;
margin: 0 auto;
}
#whatsnew h1{
margin-bottom:20px;
}

/*sectionbox
--------------------------*/
.section{
border: 3px solid #999999;
}
.section h2{
background:url(images/2.png) no-repeat left 0 top 5px;
font-size: 16px;
border-bottom: 1px solid #777777;
padding-left: 45px;
color: #4872F7;
}
.section p{
padding:16px;
}

Date(); の復習 / 日付の表示

<body>
<h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1>


<script>
function now(){
now = new Date();
year = now.getFullYear()+'年';
month = (now.getMonth()+1)+'月';
date = now.getDate()+'日';
hours = now.getHours()+'時';
minutes = now.getMinutes()+'分';
seconds = now.getSeconds()+'秒';
day = new Array('日曜日',' 月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日');
jpDay = day[now.getDay()];
document.getElementById('now').textContent = year+month+date+hours+minutes+seconds+jpDay;
}
now();
</script>

scriptの記述場所

  • htmlのタグは基本的に上から順番に読み込まれる。
  • scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。

うまくいかない

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display Date</title>
<script>
var now = new Date();
var display = document.getElementById('display');
display.textContent = now;
</script>
</head>

<body>
<p id="display"></p>

</body>
</html>

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

 

うまくいく

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display Date</title>
</head>

<body>
<p id="display"></p>
<script>
var now = new Date();
var display = document.getElementById('display');
display.textContent = now;
</script>
</body>
</html>

 

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

 

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

  • 引き続き、PDFのファイルサイズを縮小するための考察。
  • 「最適化パネル」の「オブジェクトを破棄」が気になった。
  • そこでテスト。

 

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

  •  ケースによるだろうが、元のファイルがどのくらいサイズダウンできるのだろう?
  • ちなみに最適化に際して、「標準」を選択したうえで、「オブジェクトを破棄」の項目をすべて選択した。
  • 結果、元のファイルサイズは67612、最適化後は34403でおよそ半分になった。
  • さらにほかの項目を追加してみる。

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

  •  今度は「ユーザーデータを破棄」にすべてチェックを入れてみる。「オブジェクトの破棄」も併せて使用。
  • 結果は驚きに値します!
  • 67612kbの元ファイルが540kbになってしまいました。1%未満、、、
  • 800%に拡大してもこの解像度。
  • 今まで何を苦労していたのか、、、、という感じですね。
  • PDFは周辺情報の塊なんですね。

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

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

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

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

 

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」