Bootstrapを導入してみる
Windows10 Home 64bit 21H2
Node.js 18.1.0 (npm 8.8.0)
Webサイト制作をやるようになって数日。
レイアウトをもっと綺麗に書けないかと考えて、今回はBootstrapのお試し。
俺はWordPressでもっと手軽にサイトを作りたいんだー！
Webアプリケーションフレームワークだそうだが、どういうものだかまったくわかっていない。
まずわかることは「GUIでサイトをデザインするとHTMLとCSSを吐き出してくれる」ツールではないということだ。
インストール
Bootstrapの入手方法にはいくつかあるようだが、違いが判らないのでいくつか試してみた。
コンパイルされたCSSとJS
まず「コンパイルされたCSSとJS」をダウンロードしてみた。
「bootstrap-5.0.2-dist.zip」1.26MBくらい。
ソースファイル
次に「ソースファイル」をダウンロードしてみた。
「bootstrap-5.0.2.zip」5.0MBくらい。
これには「bootstrap-5.0.2-dist.zip」の中身も入っている。
npm
これは5.1.3が入るようだ。
git
これも5.1.3のソースファイルが入った。
なぜ公式サイトに置いてあるものが古いのか、、、安定版なのかな。
まぁやってはみたけどnpmでどこにインストールされたのかわからない。
ダウンロードの結論
gitから持ってこいということだ。
さて、続き。
フォルダの中にpackage.jsonがあるので、同じ場所で「npm install」としてやる。
なんかいっぱい追加された。
はたして俺にここまで必要なのだろうか、、、
俺はただ、Bootstrapを使って楽に美しくWebサイトを作りたいだけなのだ、、、
本当の結論
Githubからcloneしてくるか、Githubにあるzipを持ってきて、中にある「dist」フォルダだけ使えばいいのだと思う。
Web開発環境「Local」を使ってみよう！（失敗）
Windows 10 Home 64bit
WordPressのテーマやプラグインを作ってみたいなと思って色々見てたら、LocalというWordPressのローカル開発環境があるということを知った。
PHPのバージョンを切り替えられたり
Web ServerをApacheかNginxか選べたり
柔軟に環境を構築できるらしく、これは良いと思ってインストールしてみた。
結局XAMPPを選んだ。
Localを断念するまでの道のり
Localをインストールするのは特に問題無かったのだが、ぶつかったのはサイトの作成のところだ。
「Create a new site」を押す。
サイトの名前を入力しろというので「テストサイト」と入力した。
「Invalid Domain」だって。
「Advanced options」を開いてみると、ドメインは「.local」になってる。
いかんのか？
「.local」→「testsite.local」に修正してみた。
しかし「Invalid Path」と言われNGのようだ。よくわからない。
サイト名が日本語だからダメなのかなと思って「testsite」にした。
そしたら「local site domain」の欄も自動的に「testsite.local」になった。
進んだ。つまりサイト名に非ASCII文字を使うなということだ。
PHPのバージョンを選べる。
Web serverも２種類から選べる。nginxを使ってみたかったんだ！
DBも2種類から選べる。使ってる本番のサーバーに合わせよう。
ここはWordPressのセットアップのようだ。Multisiteが選べるらしいので選んでみた。
エラーが出た。全くわからない。
ディレクトリを作れない？
「OS errno 42 - Illegal byte sequence」
文字がおかしい？
「Newly created data directory C:\～ is unusable. You can safely remove it.」
ディレクトリが参照できない？このディレクトリは存在するのになんで？
「Local error Unable to provision site」でググる。
Windowsのユーザー名に非ASCII文字が含まれてるとダメなんだって。
じゃぁ俺のPCで環境作れないじゃん。
これだけのために別ユーザー作って切り替えるのやだよ。
というわけでLocalでの環境構築は断念。
このクレンジングオイル、肌がきゅっきゅする。
終わり
Flutterを始めよう お試しアプリ②
Windows10 64bit 21H2
Flutter 2.10.5
IntelliJ Community Edition2021.2.1
Andriod Studio 2021.1.1
前回記事から変わったこと。
- MyAppというプロジェクトを作ったらエラーになったのでmy_appで作り直したのに、IDEの画面では「MyApp」と表示されていたので、プロジェクトをいったん削除して「myapp」で作り直した。
- Androidエミュレータを起動したら必ずブルースクリーンになっていたので、もう一度AVDから作り直したら起動するようになった。
さて、続きのエミュレータでアプリを起動するところから。
公式サイトの選択されたエミュレータのイメージ名が「iPhone」になってるのすごい違和感ある。
この状態で「Run」を押せばいいわけだな。
全然反応しない。と思ったら何かインストールしてるようだ。
初回起動時だけかな？
１分くらい待ってようやく起動。
まず最初に試してみろと公式に書いてあるのは「Hot Reload」だ。
アプリを終了させずに変更を反映させることができるんだって。
文字列「You have pushed the button this many times:」と書いてある文字列を
「You are shock!」に変更しHot Reloadしてみた。
「Hot Reload」ボタン押さなくてもSave allした時点で反映されてるんだけど。
そういう設定になってるの？これは困るな。
え、Hot Reloadってそういう機能なの？じゃぁしょうがないのか、、、
って言うか、公式サイトにも「保存 または ホットリロードボタンを押せ」と書いてあるね。
このHot Reloadはデフォルトのビルドモード、つまりDebugモードでは常に有効らしく、これが嫌なら「Run」の下にある以下のどっちかを選んで実行すればいいようだ。
たしかにReleaseモードで起動したらHot Reloadボタンが無効になっている。
終劇
Flutterを始めよう お試しアプリ①
環境
Windows10 64bit 21H2
Flutter 2.10.5
IntelliJ Community Edition2021.2.1
Andriod Studio 2021.1.1
さてさて、選択したIDEの「IntelliJ」でプロジェクトを作っていくよ。
SDKの場所を入力するようだ。
「bin」を指定すればいいのかな？
と思ったらダメみたい。
単純にFlutterをインストールした場所でいいようだ。
プロジェクトの設定をしていくよ。
プロジェクト名は「MyApp」にしてみたよ。
小文字を使えだとさ。
じゃぁ「my_app」に変更。ディレクトリは「myapp」。
プロジェクトが作成できた。
しかしなぜかプロジェクト名、フォルダが最初に入れた「MyApp」になってる。
IntelliJのプロジェクト選択画面ではちゃんと修正後の「my_app」になっている。
謎だ。
プロジェクトを開くと、すでに「main.dart」というファイルができている。
Android Studioの方で作ってあったEmulatorが表示されるので選択する。
数秒後、ブルースクリーン。
終わり。
Flutterを始めよう 環境構築編②
Flutterのエディターを選ぶことになりました。
さて、公式で案内されてるのは
この４つだ。
もちろん上記以外のものを使ってもOKだそうだ。
俺のPCにはAndroid StudioとIntelliJとVisual Studio Codeが入れてある。
どれがいいかわからないけど、どれも試してみるのも時間かかるから、ここはIntelliJを使うことにしよう。
Pluginsの中にFlutterがある。
Flutterのプラグインたくさんあるな。他のはどういうプラグインなんだろう？
なんて調べるのも大変なので目もくれず一番上のやつだけをインストール。
Flutterのプラグインをインストールすると、一緒にDartのプラグインもインストールされる。
コマンドパレットから「Flutter doctor」を実行できる。
環境の検証をしてくれるのだ。
「出力」タブに結果が出る。
今日は短いけどここまで。
Flutterを始めよう 環境構築編①
始めるのは俺なんだけどね！
まったくの無知からFlutterを覚えていく様をブログに綴っていこうと思います。
前置きは短く！
じゃぁまず環境の構築だ。（Windows10）
「Flutter」でググって一番上にある公式っぽいサイトにアクセス。
そこで「Get started」をクリック。
「OSを選べよ」という指示があるので「Windows」をクリック。
以下サイトから引用のSystem requirements。
OS：Windows 7 SP1 or later (64-bit), x86-64 based.
ディスクスペース：1.64 GB (does not include disk space for IDE/tools).
必要なツール：
- Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.
なんだ、Gitがいるのか。
Gitのインストール、設定項目多すぎて辛い。
エディターにVSCode使う以外は全部デフォルトでいいや。
で、ようやくFlutterのSDK（2022/4/21時点 2.10.5）。
zipで900MBあって、解凍すると2.3GBくらいある。
全然1.64GBじゃ足りんやんけ！！！
これをC直下に解凍。
ちなみにgitのリポジトリからも取ってくることが可能だそうだ。
次にFlutter\binにPathを通してあげる。
続いて、flutter doctorを実行せよと書いてある。
これによって環境に過不足ないかチェックできるようである。
俺の環境では３つの指摘が挙がった。
Visual Studioの不足コンポーネントだけで6GB近くあるんだけど、、、
以前インストール済みだったAndroid StudioをアップデートしようとしたらSDK Managerが起動しねぇ。。。
しょうがない入れ直すか。
これも時間かかる。。。もはや何GB必要なのかわからねぇ。。
不足は無くなった！
次はFlutterで作ったアプリを動かすためのデバイスのセットアップのようだが、これはエミュレータを使うからスキップしよう。
エミュレーターのセットアップは、、、
Flutterのサイトの説明と実際のAndroid Studioの動きが微妙に違う。
Android Studioってアップデートのたびに使い方や項目名称やメニュー遷移とか変わって、ちょっと古い操作手順が役に立たなくなるイメージあるある。
これで諸々のインストールはお終い！！
Bochs2.7でゲストOSへホストOSからファイルを渡したい
環境
ホスト：Windows 10 Home
ゲストOSにファイルを渡したい
VMwareみたいに、ホストOS上でコピーしてゲストOSにペーストというわけにいかないみたい。
なので、VVFATとして、ホストOSのディレクトリをつなげてあげたらいいみたい。
これが正攻法なのかわからないので、知ってる人いたら教えてください。
VVFATを使う
- まずホストOS側に、ゲストOSに送りたいファイルを置いたフォルダを用意します。
- ここでは「C:\share」とします。（以降共有フォルダと呼びます）
- 共有フォルダに適当なファイル（0byteでよい）を置きます。
- 「.bxrc」ファイルを右クリックして「Configure」で設定画面を出します。
- 「Disk & Boot」を選択します。
- どこでもいいのでdiskをつなげるようにします。画像は例です。ATA channel 0のSecondにつなげるとしましょう。
- 「Type of ATA device」を「disk」に、「Type of disk image」を「vvfat」にします。
- 「Path or physical device name」に、共有フォルダのパスを書きます。（例ではc:\shareにしています）
- 「Path of journal file」に、3で作った適当なファイルのパスを書きます。（例ではc:\shareの配下に0byteのjournalという名前のファイルを置いています）
これでゲストOSを起動すれば、C:\shareの中身がゲストOSから見えるようになります。
ただし、ゲストOS起動中にc:\share配下のファイルに変更を加えても反映されません。
ゲストOS起動中の共有フォルダへの変更はすべてjournalファイルに記録され、Bochs終了時にホスト側に反映されるようです。
ちなみにこのVVFAT、503MBまでしか認識されない、、、？
大きなファイルを入れてみてないのでどうなるかわからないです。（やってみろって話）
終劇
