| ホームページ | Pirikaで化学 | ブログ | 業務案内 | お問い合わせ |
| 情報化学+教育トップ | 情報化学 | MAGICIAN | MOOC | プログラミング |
2022.6.29
Pirika.comでプログラミング
山本博志
珍しく、Macユーザー。
Windowsユーザー向けに、メモ帳とか、ワードパットというテキストエディーターにコピペして保存と言っていたら、Macの「メモ」アプリケーションに貼り付けセーブできないと言っていることが判明。
Macの「メモ」は非常に高機能なアプリケーションで、文字、画像のストッカー（保存容器）のように働くアプリケーションです。Mac, iPhone, iPadでファイルを連携できるので私も重宝しています。でも、セーブなどはできない。「メモ」のフォーマット（書き込み規則）で自動的に保存されるだけです。
昔々のテキストというのは、アルファベットの文字、数字、記号だけでした。それだけで作られたものを「（プレーン）テキスト」と呼び、それを磁気的に保存したものをテキスト・ファイルと呼びました。
今はコンピュータの扱えるメモリーと保存の領域が同じシリコン上になってしまったので、ファイルという概念もなくなりつつあります。
さらに日本語の文字とか拡張されていきましたが、一番大きな拡張は、文字の色だとか、文字の大きさ、上付き、下付き、太文字など、テキストの表現が豊かになった点です。
そうした、テキストは「リッチ（豊かな）・テキスト」と呼ばれています。
Mac用のテキストエディット・アプリケーションで、プログラムをコピペしてセーブすると、リッチテキストになってしまって、ブラウザーで立ち上げても、プログラムは動きません。「0-0プログラム以前の基礎。黒電話の取説」に回避方法も含め解説しています。
今ならCotEditorを使うのがお勧めです。
何人か、そのようなフィードバックをしてくれた方がいます。
ファイルを送ってもらうと、htmlファイルだけを送ってくれます。
この問題は、多くの場合ファイルの位置関係の問題（階層型ファイルシステム）です。
htmlファイルだけを見てもどうして動かないのかはわかりません。
例えば、上の図のように、ドキュメント・フォルダにMyHtmlフォルダを作ります。
pirikaから3択の問題をコピペして、MyHtmlフォルダにTest.htmlというファイル名でセーブします。
そこに、正答数がある値以上あった場合に表示する画像を置きます。
それを読み出すには、htmlの中に次のように書きます。
const img=new Image();
img.src="./Good.png";
画像をプログラムの中て扱うために、画像を入れる入れ物(img)を用意します。
そしてその入れ物に、Good.pngという画像を入れます。
そのためには、そのGood.pngというファイルが、階層型ファイル構造のどこにあるかを指定しなくてはなりません。
./
というのは、htmlファイルと同じ階層に居るという意味になります。
そこで先のプログラムの部分は、
画像を入れる入れ物(img)を用意して、そこに、htmlファイルと同じ階層にあるGood.pngというファイルを入れなさい。
という意味になります。
画像が複数になってくると見通しが悪くなるので、imagesというフォルダを作ってその中に入れておくとスッキリします。
const img=new Image();
img.src="./imges/Good.png";
imagesはhtmlファイルが置かれている階層より一つ下の階層になります。
そこで、imagesの中のファイルの位置を指定するには、次の様になります。
./imges/
./でhtmlファイルがある階層。その下の階層(images)の中にあると指定します。
そこで、うまく動かないから見てくれとTest.htmlファイルだけをメールで送っても、画像ファイルは送られてこないので、こちらではなぜ動かないのかわかりません。
その様な時には、複数のファイルをZip圧縮を使って一つのファイルにしてしまいます。
マックでは、フォルダを右クリックして圧縮します。
ファイルの階層構造ごと送れば、こちらで何故動か無いのか確認できます。
圧縮というのは、複数のファイルをひとまとめにしてファイルのサイズを小さく圧縮すること。（ただし、一つのファイルでも圧縮すれば容量が小さくなる）
有名なのがZIP圧縮。
階層構造を保ったまま複数ファイルを一つのファイルに、サイズを小さくしてくれる。
Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。