ブログ作成の基礎

ここでの目的はWebをWeb上で作ることである。WordPressと似たような目的であるが、自分で作成することに意味があるように思う。

基本的考えは、サーバでしかできないことはサーバで、クライアントで動かせるものはクライアントで処理を行なう。極力サーバの負担を無くし、クライアントが重くならない程度に快適に動作させたい。

サーバで動作するのはPHPもしくはPerlもしくはJavaを考えている。クライアントではJavaScriptである。

なぜJavaScript一択なのかは、多くの人はお分かりだと思うが、JavaAppletが廃止されたために選択肢がJavaScriptしかないためである。

サーバで動くプログラム開発のことをサーバーサイドプログラミングと呼ばれるのに対し、クライアント側のWeb上で動作するプログラム開発のことをフロントエンドプログラミング又はクライアントサイドプログラミングと呼ばれる。

クライアントで動作するのだから、クライアントプログラムと言うのかと思えば、違うことに要注意。ネット検索でクライアントプログラムを調べると、P2Pソケット通信を指すことが多い。混乱回避のため、フロントエンドプログラミングと呼ぶのが良さそうである。

注）サーバやクライアントという用語は、クライアント-サーバシステムの考えに由来している。昔の大型コンピュータとそれにぶら下がる端末群の考えに似ている。一台のサーバコンピュータにそれを利用しようとする顧客達が接続要求を出す。この顧客たちのことをクライアント(clients)と呼び、顧客が直接使っているパソコンなどのコンピュータをクライアントコンピュータもしくは単にクライアントと呼ぶ。

JavaScriptの基礎

JavaScript、しばらく使ってなかったからほぼ忘れてしまったあ～
初歩から始めようと思うが、全く初歩からというのも癪に障る。 CやJavaに似ている部分も多いので、適当に飛ばし読みで学習することにしよう。

しかし、JavaScript、昔はただのスクリプト言語だと思っていたが、現在はかなり進化し、オブジェクト指向もできるようになったようだ。 JavaやC++の経験を生かし、効率よく学習しようと思う。

プログラミングの手法、変数や演算子、条件分岐や関数などは他言語と似ているのでしばらく読み飛ばし、html文書との関係から見ていくことにする。 JavaScript特有のプログラミングもあるが、その辺は、必要に応じて適宜勉強していこう。

最初に、WebブラウザとJavaScriptのインターフェースDOMから見ていくことにする。

DOMとJavaScript

DOM は、Document Object Modelの略であり、サーバからhtmlファイルを読み込んだWebブラウザがhtml文書を解読するための仕組みまたはそのモデルである。 JavaScriptなどのプログラム言語とのインターフェースを提供する。

木構造モデルで解釈され、各タグはノードと呼ばれ、親ノードと子ノードや兄弟ノードという入れ子構造で解釈される。DOMは文書をノードとオブジェクトで表現する。

WebブラウザはWindowインターフェースとDocumentインターフェースを用意している。JavaScriptではグローバルオブジェクトwindowとdocumentを使い、様々な処理が実行できるようになっている。

JavaScriptではオブジェクトと変数の明確な区別がなく、windowおよびdocumentは、それぞれ変数と言ったりオブジェクトと言ったりするようだ。しかし、変数という言い方はどうもしっくりとこない。

ここでは、windowやdocumentをオブジェクトと言うことにする。と言っても、名前は固定であり、変更できない、Webブラウザとのインターフェースとして通常のオブジェクトのように利用できる何かという漠然とした捉え方で良いだろう。

他言語でも変数をオブジェクトと考えてもよいが、intやdoubleなどの数値型変数は他のオブジェクトとは異なり、値取り変数としての性格が強く、一般のオブジェクトと異なる扱いになる。

それゆえ、オブジェクトと呼ぶときは、値取り変数とならないポインタ渡しのオブジェクトという意味合いが強く、intやdoubleなどの数値変数とは区別されることが多い。

しかし、JavaScriptの場合、型宣言なして変数が使えるため変数に区別がなく、オブジェクト＝変数が成立してしまうようだ。

しかし、変数は変化するものというイメージが強く、変化できないwindowやdocumentオブジェクトを変数と呼ぶことに大きな抵抗がある。

windowはWebブラウザの各機能を利用するためのメソッドを、documentはhtmlデータの各タグとの関連付けや処理を行なうメソッドを提供する。

のようにhtml文書の中に記述する。基本的には</body>の直前に書くのが望ましいが、<head>タグ内に記述する場合もある。なお、windowは省略可である。

上記の処理は単にWebブラウザのコンソールにメッセージを表示するだけのもので、ブラウザ表示に変化はない。 googleでは、その他のツール＞ディベロッパーツールを選択するとコンソール画面が見れるようになっている。他のブラウザでも多少表示方法に違いがあるが、コンソール画面を開くことができる。このコンソール画面はWeb開発のために用意されたものであり、一般利用者はほとんど利用することはないが、Web開発者には必須知識であろう。

windowメソッドはその他に、alert(),confirm(),open(),close(),scroll()などがある。

htmlの表示後にJavaScriptを実行したいのか、JavaScriptを実行してCSSなどの変更をしてからhtmlを表示したいのかで記述位置が変わる。 JavaScriptが重い場合にWebブラウザの表示が遅くなるので、</body>の直前に書くのが一般的である。とは言うものの、EdgeやGoogleクロームの場合、</body>の直前に書いてもJavaScript実行後にWeb表示されるので、どこに書いても同じという印象である。しかし、FireFoxの場合はhtml表示後にJavaScriptが実行されている。それゆえ、</body>の直前にJavaScriptを記述しておくことが推奨される。このことは、下記のボタンをWebブラウザを変えて試してみると確認できる。

上のボタンをクリックすると、右図のようなダイアログボックスが表示される。

Webページが表示される直前で表示されるので、OKをクリックするとテストページが表示される。

alert()メソッドを直接呼び出すようにすると、alert Test pageのようにWebブラウザが表示される前にalert用のダイアログボックスが表示されてしまうため、学習用としてはいささか不便であり、一般的な使い方でもない。

そこで、ボタンクリックでalert()を呼び出すようにしてみようと思う。

<button onclick="Button1Click()"> alert()の呼び出し</button>
......................
<script type="text/javascript">
function Button1Click() {
alert("alert()の呼び出しボタンがクリックされました。OKをクリック！");
}
</script>

のように記述すると、ボタンクリックでButton1Click()関数が呼ばれ、Button1Click()関数はalert()を呼び出す。

学習用としても、一般的な利用法としても、このような関数呼び出しはとても便利である。

documentとメソッド

DOMの話に戻そう。documentはDocumentオブジェクトであり、windowのプロパティの１つとなっている。このdocumentオブジェクトの中でDOMの情報が管理され、JavaScriptによる動的Webを実現可能にしている。

window.document

と記述されるが、windowは省略可であるから、

document.getElementById();

のように、windowを省略してdocument専用の各種メソッドを呼び出すことができる。

それでは、以下のh1タグにid="h1Title"という識別コードを設定しよう。

以下のように、htmlとJavaScriptを記述した。

<h1 id="h1Title">h1Titleというidを設定された要素</h1>
......................
<button onclick="Button2Click()"> h1TitleのIDを持つh1要素を変更する</button>
......................
<script type="text/javascript">
function Button2Click() {
let h1Title = document.getElementById("h1Title");
let h1TitleText = h1Title.textContent;
console.log("h1の古い要素は"+h1TitleText);
h1Title.textContent = "新しい文字列に変更されました";
}
</script>

h1Titleというidを設定された要素

それでは、上のボタンをクリックしてみよう。

古い要素は、Webブラウザの再読み込みボタンをクリック、または、コンソールを見れば確認できる。

テキストエリア：ローカルファイルの読み込みと保存

ローカルファイルからの読み込みに関しては、ネット上にたくさんの解説があり、プログラムが公開されている。それゆえ、ここでのJavaScriptプログラムは流用版であり、ローカルファイルからの読み込みプログラムの解説は省略する。

操作に関しては、一般的なアップロードの方法とほとんど同じである。Webブラウザによって表示や操作に微妙な違いがあるが、大きな違いはほとんどない。

<textarea>タグは長めの文章が入力できるボックスを用意してくれる。

テキストエリアに入力したデータをローカルファイルに保存することを考えることにする。

ダウンロードファイル名 :

temp.txt

ファイル名の変更 :

上のテキストエリアとボタンに対して、以下のような設定を行なった。

<label>ファイル名 : </label>
<div style="border:1px solid black; background-color:lightgreen; display:inline;">
<a id="a_name">temp.txt</a>
</div>
<textarea rows="4" cols="90" id="txtArea"></textarea>
<br>
<label>ファイル名の変更 : </label>
<input type="text" size="20" id="f_name" >
<br>
<button onclick="reflect_changes()" >最新の変更を反映 </button>
<button onclick="textarea_download()" >最新の変更をダウンロード </button>
......................
......................
<script type="text/javascript">
function reflect_changes() {
let txt = document.getElementById("txtArea").value;
let fname = document.getElementById("f_name");
let filename = fname.value;
let a = document.getElementById("a_name");
if (!filename) filename = a.textContent;
fname.value = filename;
a.textContent = filename;
if (!txt) { return -1; }
let blob = new Blob([txt], { type: 'text/plain' });
a.href = URL.createObjectURL(blob);
a.download = filename;
return a;
}
function textarea_download() {
let a = reflect_changes();
if ( a < 0 ) return;
a.click();
}
</script>

上記のhtmlとjavascriptは、ネット上の様々な解説を参考に作成した。一部理解が及んでいない部分もあるが、動作確認をしながら、記述した。

テキストエリアに文書を入力し、Webブラウザを起動しているパソコンのローカルファイルにデータ保存できるようになっている。

しかし、ダウンロード形式の保存が一般的となっているため、ダウンロード専用フォルダに保存され、任意のフォルダを選択することやファイル名の任意設定などが一般的にはできない。

ここでは、少し面倒な処理をして、ファイル名任意変更後にダウンロードできるようにした。

また、特殊な使い方であるが、右図のように緑表示してあるファイル名表示欄を右クリックすることで、名前を指定して保存ができるようにした。

この場合、フォルダの選択もでき、上書き保存もできる。

しかし、この方法はWebブラウザの機能の一つ、リンクファイルの右クリック処理を使っているので、ブラウザによって若干表示が異なる。

なぜこのようなことができるのか、<a>タグのファイル名にテキストエリアの中身を示すリンクが設定してあり、サーバに実ファイルが存在しない仮想のファイルをWebブラウザにリンクファイルが存在しているかのように見せて処理しているからである。

このような使い方が正しいのかわからないが、こういう使い方もできる。

使い方であるが、必ず、「最新の変更を反映」ボタンをクリックしてから、データ保存を行なうこと。

もし、「最新の変更を反映」ボタンをクリックしないで緑のファイル名表示欄をクリックすると、前回保存した状態以降の変更分は無視されてしまう。

なお、緑のファイル名表示欄を左クリックすると、通常のダウンロード処理になる。

このような使い方は、必ず利用者本人が確認しながら自分のパソコンに保存するので、全く問題ないと思っているが、さて、どうだろうか？

問題は、使いづらい、わかりにくい。

テキストエリア：ボタン表示の変更

ローカルからファイルの読み込みやローカルにファイルを保存は、Webブラウザにかなり依存しているため、ボタン表示の変更は面倒なことになる。

しかし、工夫してみようと思う。

ファイル名：
ローカルからファイルの読み込みローカルにファイルを保存

上のように、ボタンの形状や動作を変更し、かなりすっきりした。

「ローカルからファイルの読み込み」ボタンをクリックすると、ファイル選択画面が表示され、任意のファイルを指定することができる。選択したファイルが上のテキストエリアに読み込まれると、上のファイル名：のところにファイル名が表示される。

[ローカルにファイルを保存]ボタンをクリックすると、「ここを右クリックし、「名前を付けてリンク先を保存」を選択してください。左クリックすると、通常ダウンロードになります。」と緑色背景の文書が表示される。

この緑色背景の文書を右クリックすると、ブラウザが用意した選択ダイアログボックスが表示される。「名前を付けてリンク先を保存」を選択するとファイル選択画面が表示されるので、ファイルを選択し保存することができる。

左クリックすると、通常のダウンロードと同じように、一意的に決められた場所に自動保存される。このとき、同名のファイルがあった場合、(2),(3)のような文字列がファイル名に追加されて保存される。また、ファイル名は直近の読み込み時のファイル名が使用され、なければ undefined.txtとなる。

左クリックの場合、保存先は通常「ダウンロード」フォルダになる。フォルダやファイル名の指定ができないのが欠点である。また、ブラウザ側の設定で保存フォルダの変更はできるが、いささか面倒である。

背景が緑色の文書を表示させて右クリックを誘導するやり方は、いささか苦肉の策ではあるが、ブラウザ側の仕様の限界だろう。

これ以上はちょっと無理かもと思っている。

次は、ブログ作成の基礎2である。

ブログ作成の基礎2へ

back next