My スマホページ

自分のスマホにホームページを作成します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

ホームページを作成する

自分のスマホに HTML ファイルを作成してページを開きます。
手順は次のようになります。
①スマホで使える Text Editor を用意します。
②Text Editor で HTML ファイルをタイプしてスマホに格納します。
③ブラウザを起動してページを表示します。
1. インターネットで検索して使いやすそうな QuickEdit を見つけました。
 スマホで使えれば何でもＯＫですが、私は QuickEdit インストールして使うことにします。
2. QuickEdit を使って Hello HTML を表示する hello.html ファイルを作成します。
 QuickEdit を起動すると新規ファイルで始まります。
 次のソースコードをタイプして下さい。
 <html> <body> Hello HTML </body> </html>
3. タイプが終わるとセーブアイコン(三個並んだ左端)をクリックして hello.html の名前で保存します。
 ファイルは「ルート/sdcard」に保存されます。
 (ファイルは「最近開いたファイル」からも参照出来ます)
4. ファイルマネージャー/最近開いたファイルから hello.html を選択して下さい。
 起動するアプリの問い合わせがあるので「HTMLビューアで開く」を選びます。
 起動するアプリは「設定/アプリ/アプリの設定をリセット」でリセットすることが出来ます。
 "Hello HTML" が表示されたら完成です。
次に写真(画像)を表示する img.html を作成してみましょう。
1. スマホの写真機能を使って描画する写真を撮影して下さい。
 撮影した写真は「ルート/sdcard/DCIM/Camera」のフォルダーに格納されています。
2. 写真を表示する img.html を作成します。
 QuickEdit を起動すると前回作成したファイルで始まります。
 次のソースコードをタイプして下さい。
 P_20210323_082243.jpg は撮影した写真の名前です。ファイル名は各自で確認して下さい。
 名前をつけて保存から img.html で保存して下さい。
 ファイルは「ルート/sdcard」に保存されます。
 <html> <body> <img src="DCIM/Camera/P_20210323_082243.jpg"> </body> </html>
3. ファイルマネージャー/最近開いたファイルから img.html を選択して「HTMLビューアで開く」で起動して下さい。
 このままでは画像が大きくて一部しか表示されません。
 img タグを次のように修正して下さい。
 <img src="DCIM/Camera/P_20210323_082243.jpg" width="400" height="600">
次はアニメーション GIF をスマホに格納して表示します。
1. 描画する美人のアニメーション画像です。
2. アニメーション画像と anime.html をＺＩＰで圧縮してダウンロードします。
 パソコンでは *.zip をクリックするとダウンロードしてくれるのですが？
 スマホでもダウンロードが出来るのでしょうか。
 
 美人のアニメーションの Down Load(anime.zip)
3. anime.html は写真を表示する場合と同じで、画像の名前が animebijin.gif に変わるだけです。
 (anime.html と animebijin.gif は同じフォルダーに格納して下さい)
 <html> <body> <img src="animebijin.gif"> </body> </html>
4. 上部のリンク(美人のアニメーションの Down Load)をクリックすると、無事に内部ストレージに取り込むことができました。
 anime.zip を anime のフォルダーを指定して解凍すると「内部ストレージ>ルート>sdcard>Download>anime>」に展開されました。
5. スマホのファイルマネージャーを起動して、内部ストレージ>Download>anime> から anime.html を選択します。
 HTMLビューアで開くと美人のアニメーションが表示されます。
6. QuickEdit を使って HTML ファイルをタイプしたときは「ルート/sdcard」に保存されます。
 ダウンロードフォルダーに格納されている IMG_0160.jpg を表示するときは次のようになります。
 <html> <body> <img src="Download/IMG_0160.jpg"> </body> </html>