7月 2022のアーカイブ

XAMPPをインストール

ホームページやWebサイトを作成するとき、サーバで公開する前にPCで確認できると安心。一番簡単な方法は、PC上でWebサーバを動かすこと。私は10年以上前から XAMPP（ザンプ）という無料のツールを使っています。

今回は、Wordpress の確認用に使うためにインストールしました。手順は以下の通り。

  1. 公式サイトからインストーラをダウンロード（https://www.apachefriends.org/jp/index.html）
  2. ダウンロードしたインストーラ (拡張子が exe のファイル) をWindows10 上で実行

使わない機能はできるだけインストールしたくないので、以下の内容に絞りました。

ツール名機能
ApacheWebサーバのエンジン
MySQLデータベース
FileZlllaFTPServerファイル転送サーバ（これは要らなかったかな。。。）
PHP開発言語
phpMyAdminDBサーバ管理ツール

インストールする際、セキュリティ対策ツールはオフにするようにとメッセージが出ましたが、
オフにしないで進めてみました（失敗してもアンインストールしてやり直せば良いと思ったので）

その結果、１回だけ怪しい現象（PC再起動しそうになった）がありましたがちゃんとインストールできました。

以下、画面キャプチャ（抜粋）です。

C:ドライブにインストール。他のドライブでもOKです。
英語かドイツ語の二択でした。
Leam more about Bitnami for XAMPP のチェックは外しました。
この状態で待つこと10分弱
PC再起動が突然かかったので、キャンセルして「No」選択
なんとか無事終了

ちゃんと起動できました。

今日はここまで！

2022年7月27日 | カテゴリー : 開発環境 | 投稿者 : tanaka@rey-net.com

bootstrap を使って1ページだけのホームページを作る

　
bootstrap を使って1ページだけのホームページを作る。
　仕様は、以下の通り。
　・１つのソースコードでパソコン、タブレット、スマートフォンなど
　　画面の大きさが異なる端末に対応する。
　・お問い合わせやコメントなど、利用者が入力するフォームを設置しない。
　・古いブラウザには対応しない。
　・ソースコードは、すべてダウンロードして利用する（CDN は使わない。）
　・利用するフレームワーク　bootstrap
　
　最低限準備するもの
　1 ネット接続環境
　2 Webサーバ（ホスティング、クラウドどちらでもOK）
　3 HTMLを編集するテキストエディタ（サクラエディタなど）
　4 ファイル転送ツール（FFFTPなど）
　
　作成手順
　1 PC上にページを作成するフォルダ（ディレクトリ）を作成
　　例：c\:sample_page
　　
　2 bootstrap をダウンロード
　　
　　公式日本語サイトトップページ；
　　　https://getbootstrap.jp/
　　ダウンロードページ：
　　　https://getbootstrap.jp/docs/5.0/getting-started/download/
　3 2 でダウンロードした zip ファイルを解凍し、ページを作成するフォルダの下に設置
　　
　　例：c\:sample_page
　　　　　+– bootstrap ※1
　　　　　　　+– css
　　　　　　　　（この下に、スタイルシートファイルがあります）
　　　　　　　+– js
　　　　　　　　（この下に、スクリプトファイルがあります）
　　※1 zip を解凍すると、フォルダ名は bootstrap-5.0.2-dist のような形式になっています。
　　　　bootstrap 以降の文字は、バージョンによって異なります。
　　　　フォルダ名は、bootstrap に変更します。
　4 ベースになるHTMLを bootstrap の公式サイトからダウンロード
　公式サイトは、無料のサンプルが公開されています。
　https://getbootstrap.jp/docs/5.0/examples/
　0からHTMLを作るより、一番イメージが近いサンプルを改造した方が楽だと考えます。
　サンプルのソースコードは、Download exsamples ボタンで一括ダウンロードできます。
　
　5 サンプルの HTML ページを保存
　　今回は、Album を元にして、HTML を作成します。
　　ダウンロードしたAlbum サンプルの index.html を、
　　bootstrap と同じフォルダに保存します。

　　例：c\:sample_page
　　　　　+– bootstrap
　　　　　　　+– css
　　　　　　　　（この下に、スタイルシートファイルがあります）
　　　　　　　+– js
　　　　　　　　（この下に、スクリプトファイルがあります）
　　　　　　　+– index.html

　6 HTML を編集
　　テキストエディタを起動し、Album のソースを更新します。