【5日目】エンジニアの人が使ってる「あの画面」を手に入れた！
Posted: Last Update:
ブログでのお小遣い稼ぎを目指して5日目です。サイトの形も全くできていない、まさしく亀の歩み。 昨日は、ブログなどの仕組みでよく使われている「PHP」を自分のPCで動かせるようにしました。
その中で学んだこと…- セキュリティソフトはWindows Diffenderで充分
- FTPクライアントソフトがなくても、ロリポップ
のウェブ上でファイルのアップロードはできる
- PHPをPCで動かす環境は素人でも作れる。（PHP開発できるかはまた別のお話）
今日は、ブログのトップページを作るのに取り掛かりたいと考えています。
Visual Studioの導入を検討
今回、PHPを利用してサイトを構築しようとしているのですが、それに役立ちそうなVisual Studioを導入するか、まず検討したいと思います。
「Visual Studio」はMicrosoftが提供している「統合開発環境」だそうです。このソフトを使うと、プログラミング言語を見やすく表示したり、候補を教えてくれたり、間違いを指摘してくれたりするらしい。 「Visual Studio」を画像検索すると写真がたくさん出てきます。文字が赤くなったり青くなったりしてる！開発者っぽい！なんかかっこいい！
「Visual Studio」が私にとって必要か検討する予定でしたが、かっこいいので、導入します！ いつもなら、そのソフトでできることとか、機能とか、PCにかける負荷など、いろいろ調べるんだけど、今回はいいや。 だって、かっこいいんだもん（笑）
「格好良さ」だけを求めてVisual Studioを開始
早速Windows版のVisual Studioのページへ。 個人使用に関しては無料です。無料の「コミュニティ版」なるものをダウンロードします。ダウンロードをクリックするとインストール手順やスタートガイドなどが画面表示されました。開発者向けなのに、至れり尽くせりですね。しかし、ダウンロードしている間に、手順を診ようと思ったら、なぜか英語ページに飛んでしまいました…。ブラウザを英語設定にしているからかもしれませんが（英語の勉強中）…。
苦笑している間にダウンロードが終わっていました。1,362KB。データが軽い！exeを走らせると…、ダウンロードしたのが日本語版でちょっと安心しました。
しかし！次の画面でワークロードを選択せよと出て来た。…事前に調べないと分からないものが出てきます。やはり、下調べはちゃんとするべきですね。 最も簡単にわかる方法、と思って、先ほど開いた英語ページでPHPを検索。一番上に出て来た「Add Visual Studio editor support for other languages」を読むと、PHPはデフォルトでサポートされているらしい。さらに「Navigate To」という機能を追加するとcode fileやfile path、code symbolを紹介してくれるとか。…なんのことか分からない…。
思いついて、言語を切り替え。URLにあるen-usをjaに変更。無事、日本語ページに飛びました。
「Visual Studio エディターの他の言語のサポートの追加」らしい。「Navigate To」は「移動」という機能らしいですが、よくわからなかったcode fileやfile pathはそのままカタカナで書かれていました。当然、なんのことか分からない。 さっきは親切と思ったけど、やっぱり開発者向け何ですよね。用語の説明までしないのは当たり前でしょう。
Visual Studioについて検索していたら、VIsual Studio Codeに出会った
気を取り直して、Visual Studioについて親切に教えてくれているサイトがないかとGoogle検索。で、気づきました、もっと軽量なVisual Studio Codeなるものがある！高度なことをしない場合にはこちらで十分らしい。文字の色が変わるのを楽しみたいだけなので、こちらに乗り換えましょう。 Visual Studioのページの下の方にありました。 ダウンロードを開始すると、説明画面がやはり英語で（笑）。PHPもできると書いてあります。 英語を解読している間に、ダウンロードはとっくの昔に終わってました。インストールを開始するとサクサク進んで、一分も立たないうちにアプリが起動できました。インストール画面は日本語だったのに、アプリ画面は英語です…。 開いたページに、プログラミング言語のサポートを追加できるよ、という案内が。早速PHPを選択してOKを押します。
その後いろいろ画面を移動したりして探索。画面表示を日本語にすることはできないようです。もしかしたら言語パッケージが配布されているのかもしれませんが、大したことは書いてない様子なので英語でもいけそうです。 Helpページで簡単にプログラミング言語の追加などもできそうなので使い勝手はよさそう。 黒い画面も、HelpページのColor Themeから白くできました。切り替えてみたところ、白がまぶしく感じる。コマンドプロンプトなどと似せて黒いのかと思っていましたが、初期設定が黒いのは、画面を見続ける開発者の皆様の目に優しい色だからかもしれないと、個人的に思いました。
今日はまだ終わりじゃない！サイト作成に取り掛かりたい！
ここまでて一仕事終わったような気がしましたが、まだまだ。今日はサイトの作成に取りかかりたい。 せめて一行だけでも書いてから今日を終えたいと思います。
まずは、ホームページ専用のファイル置き場を作るところから始めました。 作ったファイル、昨日作ったPC上のサーバーと繋げます。…昨日もやったことなのに、さっそく迷子になりました。メモを取っておけばよかった。Google検索から改めて方法を確認しました。
index.phpを作って、早速Visual Studio Codeで開いてみます。<html>などをやっていくと…、おおっ、青い！素晴らしい。 しかも、入力している間に、入力候補が出てきます。さくさく進みそう。 HTMLは以前に勉強したことがあるので、とりあえずレイアウトは今は考えずに必要な物だけ投入して見ました。
初めてのPHPとかっこよすぎるVisual Studio Codeの画面
ついでにPHPでの呼び出しも少しだけ練習。試しに今日の日記を呼び出してみました。 検索しながらなので、とっても疲れました。
ちなみに、Visual Studio Codeの見え方。おお、開発してるっぽい。かっこいい。私すごい！（すごいのはVisual Studio Code…）
そして、今のところのページの様子。まだなにもできていませんが、PHPで文章を呼び出せたことに大満足です。
まとめ
昨日は、今日中にサイトのトップページを作るぞ、と意気込んでいましたが、真っ白なページを作るだけで終ってしまいました。 明日はもう少し進めたい。せめて、「ブログっぽく」見える外観にするのが目標です。
今日の学び- コードを書くだけならVisual Studioではなく、VIsual Studio Codeがアプリケーションも軽くてよい
- 人はすぐ忘れる生き物。メモは大事。
- PHPの記述もGoogle検索でなんとかなりそう。
- サイトのトップページを作る
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
