何のために？
美しいポストカードを作成したいが、FLASH、Silverlightなどに煩わされないことがあります。 しかし、HTMLと少しのJavaScriptだけを知っていれば、1つのファイルでアプリケーションとして優れたポストカードを作成できます。 読み通さずに記事をめくる人は、これが完全に単純ではないことに気付くかもしれません。 ただし、フレームを作成したら（この記事の最後に試用と無料で使用できるように提供します）、新しいカードと新しいカードを簡単かつ迅速に作成できます。 また、個人用のインタラクティブカードを作成するプロセスを自動化することもできます。
人間の要件
1. HTMLおよびJavaScriptの知識。
2.ファンタジー。
3.レイアウトスキル。
システム要件
作成ソフトウェアからは、少なくともノートブックが適切です。 それを表示するには、mshta.exeが必要です。mshta.exeには、IEがバージョン5.0より上に配信されたすべてのバージョンのウィンドウが付属しています（IEなしで出荷されるWindows 7Eでもテストされています）。
鉄の要件は最小限であり、主なことは、マシンがあなたが考えているすべてのアニメーションを表示できることです。 * NIXオペレーティングシステムでははるかに複雑です。一般に、1つのファイルにアプリケーションを作成します。このファイルは一般に、ブラウザーで開きますが、機能は制限されます。 カードを完全にクロスプラットフォームにするには、コードを十分に補足する必要があります。 実際のところ、mhtmlコンテナを使用してアプリケーションを作成しますが、これはIEのみが理解できます。 他のブラウザの場合、データURIコンストラクトにリソースを保存する必要があります。これにより、アプリケーションサイズが少なくとも2倍になります。 また、OS Windowsに注目してHTAアプリケーションを作成しているため、この記事ではmhtmlコンテナに限定します。 もちろん、トピックが興味深い場合は、次回はクロスブラウザの自己完結型HTMLドキュメントを作成する方法を示します。
さあ始めましょう
最初に、postcard.htaファイルにアプリケーションフレームワークを作成します。
<html> <head> <title>iPostcard</title> <hta:application applicationName="HTAPOSTCARD" innerBorder="no" selection="no" scroll="no" caption="no" maximizebutton="no" minimizebutton="no" contextmenu="no" /> <style type="text/css"> </style> </head> <body> </body> </html>
ほぼ通常のHTMLコードの内部をご覧ください。 紛らわしいのは、htaタグとその属性のみです。 それらはすでにhabrで披露されており、Wikipediaの記事で詳細に説明されていますが、特定の例があるので、特定のアプリケーションを書き留めます。
applicationName-アプリケーション識別子。何でも記述できます。たとえば、「HTAPOSTCARD」とします。
innerBorder-内部ウィンドウフレームの存在。 美味しさには違いがあるかもしれませんが、美のためにオフにしてください。 値はyesまたはnoです。
選択 -HTAウィンドウ内のテキストの選択を有効/無効にします。 これはポストカードには必要ありません;パラメータ値に「no」を入れます。 したがって、「はい」はそのようなアクションを許可します。
scroll-ウィンドウ内のスクロールバーの存在を決定します。 コンテンツサイズが固定されるため、禁止します。
caption-ウィンドウタイトルの存在を決定します。 役に立たないので、「いいえ」を指定します。
最大ボタンと最小ボタン-「最小化」ボタンと「フルスクリーンに最大化」ボタンの存在を決定し、タイトルとアプリケーションのシステムメニューの対応するアイテムを表示します。 既にボタンでヘッダーをオフにしているため、これらのポイントを使用して、アプリケーションのシステムメニューからウィンドウを最小化または最大化する機能を除外します。
contextmenu-最後に、パラメーターを「no」に設定してコンテキストメニュー（マウスの右ボタンで呼び出されます）を削除します（「yes」に設定しても、このメニューは表示されません）。
設計
次に、美しいウェルカムページを作成します（残りのテンプレートになります）。 すぐにスケジュールの問題に戻ります。 単一のファイルとして配布する必要がある独立したアプリケーションを作成しています。そうしないと、フラッシュなどを置き換えようとしても意味がありません。 そして、質問への答えは比較的単純です-MHTMLデータコンテナを使用します。 これを行うには、base64のすべての画像をエンコードする必要があります。 この例では、裸のコードだけでなく、既製の構造も提供する便利なオンラインツールを使用しました。 エンコーダーはサイズが10キロバイト以下のファイルを受け入れることに注意する価値がありますが、これは実際には大量です。 大きな画像の場合、このような制限なしに、ネットワーク上で他のエンコーダーをいつでも見つけることができます。 今回は、きれいなbase64コードが必要です。それを取得して、ファイルの先頭にあるコンテナーに入ります。
<!-- /* Content-Type: multipart/related; boundary="_SEPARATOR_" --_SEPARATOR_ Content-Location:imagebg Content-Transfer-Encoding:base64 /9j/4AAQSkZJRgAB ... 5Jxk570UUUAf//Z --_SEPARATOR_-- */ --> <html>...</html>
将来の習慣のためにコメントにコンテナを配置します-他のブラウザはこのコードをコメントとしてスキップし、IEはそれをネイティブコンテナとして認識します。 このコードで何を、そしてなぜを説明させてください：
コンテンツタイプ：マルチパート/関連; -コンテンツのタイプを示します。
境界= "_ SEPARATOR_" -引用符で囲まれたフレーズは任意で、コンテナの区切りです。 もちろん、このフレーズの文字の組み合わせは、base64コードでは決して見つけられないことを考慮する価値があります。
--_ SEPARATOR_-次のリソースの始まり。「-」で始まり、上記の区切り文字が含まれます。
Content-Location-次のリソースのラベル。必要な画像を取得するのはこのラベル上です。 いつものように、個別の名前を付ける方が良いです。 この例では、これは画像-画像、背景-背景-背景です。
Content-Transfer-Encoding-リソース暗号化方式。
その後、切り捨てられた形式で引用したコード化された画像が続きます。
RFC 2387仕様によると、各コンテナはバンドル-[区切り句]で囲まれ、最後のリソースはバンドル-[区切り句]で閉じられる必要があります。 区切り記号がなくても機能することを言わなければなりませんが、標準から逸脱することはありません。
これで埋め込み画像ができました。これをアプリケーションの背景にします。 これ以上簡単なことはありません：
<style> body{ background-image: url(mhtml:file://C:\__\postcard.hta!imagebg); </style>
しかし、注意深い読者はすでに問題を見ました。 PATH_DO_FILEとは何ですか？ そして、ここでmhtmlによって作成された問題が開きます。これには、リソースコンテナーを含むファイルへのフルパスが必要です。 正直に言うと、これを知った（そして相対パスのさまざまなバリエーションを回避しようとした）とき、私の手はほとんど落ちました。 しかし、インターネットは知識の底なしの貯蔵庫であり、解決策が見つかりました！ あるリソースで、実行時にスタイルを置き換えるというアイデアをスパイしました。 主なアイデアは、リソースへのパスをドキュメントの完全なURLに置き換えることです。 アプリケーションにまだらにされたスクリプトが必要ないので、著者によって与えられた決定をしませんでした。 JavaScriptにしましょう。 しかし、私は確かに機能を失いました。 このスクリプトは、すべてのスタイルのパスをすぐに変更します。 さて、ここで答えがあります-スタイルだけでなく、方法を変えます。 以下について。 そして今...
...プログラミングを始めましょう
リソースへのフルパスを動的に置換するには、ドキュメントにタグが表示されるまで待機し、すぐにスクリプトを埋め込みます。
<body> <script language=javascript> $("body").css("background-image","url(mhtml:"+document.URL+"!imagebg)"); </script> ... </body>
繰り返しますが、注意深いユーザーは既にアラームを鳴らしています：-どんな$（ "body"）ですか？ これはjQueryです！ そして当然のことながら、彼のhisりは、便宜上、人気のあるフレームワークを使用しています。 彼がどのようにして自己完結型のアプリケーションになったのか、あなたには質問がないと思いますが、それでもこの「秘密」を明らかにします。 jQueryを使用して、フレームワークのソースコードをタグの間に貼り付けるだけです。
<html> <head> ... <script language=javascript> ... /* */ ... </script> </head> ... </html>
jQueryの作成者の著作権を保持し、あなたの良心に任せます。 しかし、私自身は他の人々の労働を尊重しなければならないと信じています。
このような優れた機能により、画像の埋め込みは問題になりません。
<img src="" id="imgdata1"/></div> <script language=javascript> $("#imgdata1").attr("src","mhtml:"+document.URL+"!imgdata1"); </script>
まとめ
その結果、何が得られましたか？ リソースのストレージ（RFCをさらに掘り下げることで、リソースは絶対に何でもできることがわかります）と強力な開始機能（フレームワークを意味します）を備えた本格的な自己完結型アプリケーション。 さらに、インターフェイスはプレーンHTMLでマークアップされています！ もっと美しくて便利なものは何でしょうか？ 経験豊富なhabrayuzerは、この気取らないサンドボックスを使用するためのさまざまなアイデアをすでに持っています。 通常のはがきやフルスクリーンプレゼンテーションから、本格的なVEBクライアントやデスクトップアプリケーション（VBScriptのおかげで、ファイルやレジストリを操作できます）。
スクリプトを使用して小さなスタイル、HTMLコード、シーズンを追加し、あるページにテキストがあり、別のページにあるリソースの画像があるという待望の例を取得します。 アプリケーションコードは完全にオープンです。 開始する前に、テキストエディタで開いてコードを確認できます。