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

webかたつむり

ウェブデザインを勉強中

illsutrator 文字パネル初期設定

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

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

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。

 

  • nameはalphabet, number, underscoreを使用する。
  • 使用していない場合、および予約語を使用する場合は、doublequotation で囲む。

 

  • valueには任意の式を記述することもできる。
  • valueには他のオブジェクトリテラルを記述することもできる。つまりオブジェクトはネストすることができる。

var emptyObject = { };

 

新しいオブジェクトを生成する。

var object = {

//propertyや

property1 : 'string' ,

property2 : 'string' ,

//methodや

method1 : function aa (){},

method2 : function bb (){},

//objectを記述できる。

object : {

property3 : 'string',

method3 : function cc(){}

}

}

 

すべてのオブジェクトは、プロトタイプオブジェクトとリンクしていて、そこからプロパティーを継承している。

DOM, node について

DOM

document object model

documentのツリー構造そのものなのか?

 

node

DOMツリーにぶら下がっているオーナメント。

それぞれのHTML要素。

nodeとは瘤のこと。

jQuery append prepend

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

 

 

before

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

リファレンスするのは「.vacation」。

このクラスの要素に対して前に配置する、これがbefore。

「.vacation」との繋がりはない。(関係性がない)

 

after

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

beforeの反対。これも関係性はない。

 

 prepend

「first child」として追加する。

「.vacation」との関係性がある。一番目の子要素として追加するということ。

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

 append

「last child」として追加する。

prependの反対。

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

 

 

 

これら4つの操作に対する対義語はremove、取り除くこと。

 

 

ある要素に対してクラスを追加して、いままでのクラスを取り除くといった具合です。

remove();して、append();する。

remove();して、prepend();する。などなど、、、

 

jQuery selector まとめ

基本形

$("     ");

これさえ知っていればあとはCSSと同じ。

$("li");

$("p");

$(#id);

$(".class");

$("#id li");

$(".class li");

 

pseudo selector

pseudo 擬似

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

:first

:last

:odd

:even

 

liのindexは、先頭が「0」(配列と同じ)

ゆえにeven(偶数)、は先頭、3番目、、、、となる

同様にodd(奇数) 、は実際には偶数番目になる。

ここは要注意。

 

 

traversing

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

 例えば「#id」の「li」要素を選択するときに、いくつかの方法がある。

通常セレクタを使う場合は、$("#id li");とすればよい。

traversingを使って指定する場合は、

$("#id").find("li");となる。

$(#id li).last();

$(#id).last("li");ではない。なぜか??

#id liのlast()を見つけるからでしょう。

 

 

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

 traversingはmethod();を使用して特定の要素をピックアップする方法。

traversingに使えるmethod

first()

last()

next()

prev()

parent()

children()

など。これらのメソッドを連続して使うこともできる。(method chaining)

 

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

 

 

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

 

アコーディオンメニュー 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 ページの削除方法については、以下のページを参照してください。