<h2 id="h79768ba808">今回の目的</h2>アイデアを考案する際、「アイデアが思いつかない！！」となった経験のある方いらっしゃるのではないでしょうか。 アイデアを考える方法はいくつか見つけて実際に試してみるものの、結局納得のできる素晴らしいアイデアが見つかることは滅多にでてこないものです。 ならば、AIにアイデアを代わりに提案してもらおう！ということが今回のテーマです。 もしこれがある程度使えるものだったら、 AIは一瞬で複数のアイデアを構築し、人間はAIが提案したアイデアの中から気に入ったものを選択するという新世代のアイデアの作り方になりそうです。 今回はChatGPTに「売れるWebサービスのアイデア」を提案してもらおうと思います。<h2 id="hfdb066cc0a">実際に質問してみた</h2><h3 id="heb85ed183e">「売れるWebサービスのアイデアを5つ教えてください」</h3>ではまず、無難にChatGPTに「売れるWebサービスのアイデアを5つ教えてください」と質問してみましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/06a3da27ccfb49dca4ed588c998f10a5/image.png" alt=""> 「素晴らしい…」 これほど曖昧な質問でも、売れそうなアイデアを5つ書き出してくれました。 また、この回答の下には <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/1affd280c9c045839dd6f5b2940909ad/image.png" alt=""> といったことまで書かれていました。至れり尽くせりですね。 さて、ChatGPTに提案してもらった下記の5つのアイデア ①オンライン学習プラットフォーム ②オンライン予約/予定調整サービス ③プロジェクト管理ツール ④デジタルマーケティング支援ツール ⑤プライバシー保護/セキュリティ対策ツール 今回はこの中から「①オンライン学習プラットフォーム」に焦点を当ててアイデアを掘り下げてみたいと思います。 <h3 id="h69f835fcf1">「売れるオンライン学習プラットフォームのアイデアを5つ教えてください」</h3><img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/47fa547828a34a3ba5eb095185657b5a/image.png" alt=""> といった具合に、更に細かく答えてくれました。 ①プロフェッショナルスキル向けのオンライン学習プラットフォーム ②言語学習向けのオンライン学習プラットフォーム ③オンラインプログラミングスクール ④学生向けの学習支援プラットフォーム ⑤趣味や興味に特化したオンライン学習プラットフォーム 今回は、「⑤趣味や興味に特化したオンライン学習プラットフォーム」に焦点を当ててみましょう。<h3 id="ha588d689e4">「売れる趣味や興味に特化したオンライン学習プラットフォームのアイデアを5つ教えてください」</h3><img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/4158564c129b474da15e5e7447311ed4/image.png" alt=""> ①料理学習プラットフォーム ②フォトグラフィ学習プラットフォーム ③イラスト学習プラットフォーム ④音楽学習プラットフォーム ⑤ガーデニング学習プラットフォーム を提案してもらいました。どれも面白そうなアイデアです！ 「自分でも使ってみたい！」といったアイデアを考案してもらいました。<h2 id="h82cb191b5c">さらにアイデアを実現させるための質問</h2><h3 id="h274ea4d325">既存で売れているWebサービスをまとめてもらう</h3>今回の例の「売れるWebサービス」の場合、既存のWebサービスの中でどんなWebサービスが売れているか本来は調査しておくべきです。 その際にもChatGPTに聞くだけでまとめて答えてもらえます。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/ce2282445e564019ab37839ac0be1d07/image.png" alt=""> ただし、上記内容など「情報が正しいかどうか」は別途自分で調査する必要があります。 しかし作成したいWebサービスのコンセプト作りには大いに役に立つでしょう。<h3 id="h344cd70f37">Webサービスのアイデアに対して、どんな技術・APIを使用すると便利か教えてもらう</h3><img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/c7313f10233149168521e2d0e7835f4c/image.png" alt=""> 使用技術の選定にChatGPTを参考にするという使用方法もあります。 しかし、使用技術の選定に関してはChatGPTの内容を鵜呑みにすることは信頼性の観点からまだまだ怖い部分もあるため 「こういう技術もあるんだな～」「こんな便利なAPIがあるんだな～」くらいの感覚で使用すると良さそうです。 <h2 id="ha214098e44">まとめ</h2>ChatGPTをアイデア考案に用いるのは、ふわっとしたアイデアを考案する際に非常に使えると感じました。 例えば、プログラミングを学習したけれど「結局自分は何を作りたいのか分からない」といった状況になっている場合に ChatGPTにアイデアを考えてもらって、自分はその中から「このアイデアは面白そうだな」「このアイデアなら自分の技術力でも作れそうだ」 という風に選択していくというのが、新しいWebサービスの作り方になるのかもしれませんね。

ChatGPTをご存知でしょうか。 ChatGPTは、まるで人間と話しているように自然な会話ができるAIチャットサービスです。 そんなChatGPTですが、様々な使い方がある中で今回は「売れるWebサービスのアイデア」についてChatGPTに質問してみると、どんな答えが返ってくるのでしょうか？

ChatGPTに売れるWebサービスのアイデアを考案してもらった

<h2 id="h45a82d7003">LiveEditについて</h2><h3 id="h2d8866b599">LiveEditの歴史</h3>LiveEditは﻿AndroidStudioバージョン2022.1.1のベータ版である「AndroidStudioDolphinBeta」や AndroidStudioバージョン2022.1.1のプレビュー版である「AndroidStudioElectricEelCanary」で搭載され始めました。 <a href="https://android-developers-jp.googleblog.com/search/label/Android%20Studio%20Dolphin%20Beta" target="_blank" rel="noopener noreferrer">https://android-developers-jp.googleblog.com/search/label/Android%20Studio%20Dolphin%20Beta</a> そしてついにAndroidStudioバージョン2022.2.1「Android Studio Flamingo」にて搭載されたことにより 安定版バージョンのAndroidStudioでLiveEditの機能を使用することができることになりました。<h3 id="he37c84494e">従来のAndroidアプリ開発方法</h3>今までのAndroid開発は ①アプリの画面を開発する ②ビルドする ③エミュレーターや実機で目的の画面まで遷移して挙動を確認する といった手順で開発していました。 アプリの画面を確認するためにビルドするだけでも、数十秒～数分かかると開発ペースが落ちてしまいますよね。 また目的の画面まで遷移するだけでも、目的の画面まで一瞬で到達できるようなデバッグ環境が整っていていない限り手間がかかります。<h3 id="h03cdb4a25b">LiveEditを使用したAndroidアプリ開発方法</h3>LiveEditを使用すると、従来の ①アプリの画面を開発する ②ビルドする ③エミュレーターで目的の画面まで遷移して挙動を確認する といった手順が ①LiveEdit機能でどんな画面が構築できているか確認しながらアプリの画面を開発する だけで済むため、コードの作成により深く集中できるようになります。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/c51125b0ca8b4932950f04e124382a7e/2023-04-20_15-51-12_AdobeExpress.gif" alt=""><h2 id="ha214098e44">まとめ</h2>Flutterではホットリロードと呼ばれる機能があるのですが、使用感は似た感じだと思います。 このLiveEdit機能は、Flutterの開発に限らないAndroid開発で使用できるので、ぜひチェックしてみてください。☺

2023年4月13日、AndroidStudioバージョン2022.2.1の安定版である「Android Studio Flamingo」がリリースされました。 本バージョンで追加された新機能の一つに「LiveEdit」というものがあります。 これは簡単に言うとソースコード上で加えた画面の変更を、リアルタイムにデバイスやエミュレーターで確認できるといった機能です。 本記事では、LiveEdit機能を使用することでアプリの開発がどのように快適になるのかまとめました。

AndroidStudioのLiveEdit機能を使ってみた

<h2 id="h5ef7d69a3b">成果物</h2>この記事では、このような自己紹介サイトを作っていきます。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/92b52fe1d29541469b1bbed0e8a18526/Image%202023-02-21%2014.43.00.png" alt=""><h2 id="h1eaeb72754">この記事で学習すること</h2>この記事ではHTMLの基礎的なタグを学習していきます。 <h2 id="h5fd314680e">HTMLの書き方</h2>HTMLはタグという印で囲んで書いていきます。 例えば、 <code>&lt;p&gt;私の名前はDREAMです。&lt;/p&gt;</code> といった感じで、こちらの例では&lt;p&gt;&lt;/p&gt;の部分がタグになります。 細かい書き方はこれから学習していきますが、HTMLの基本はこのタグで囲むことが全てです。 「どのタグで囲んだらサイトが作れるんだろう…。」ということをこれから一緒に学習していき、 それを知ることによって、あなただけのオリジナルサイトが出来上がってきます！<h2 id="h86ae25f4ee">サイトの保存場所を作ろう</h2>さあ、早速HTMLを書いてみましょう！…と言いたいところですが、 HTMLを保存する場所から一緒に作りましょう。(たくさんのファイルを作成するようになると、後々混乱するため…。。) HTMLの保存場所は任意なので、好きな場所にフォルダを作成してください。 本記事では、デスクトップにHTMLの保存場所を作成します。 デスクトップで右クリック→新規作成→フォルダーを選択して、分かりやすいフォルダー名を付けましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/4e7f5dd7b15f4629bac36652fcc66cd0/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%202023-02-16%2017.20.01.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/dc58ccf1e8e44f179041569f0f57a865/Image%202023-02-16%2017.22.00.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8a73d1d5629e47ffbf1f2090c56cbf14/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%202023-02-16%2017.24.40.png" alt=""> HTMLの保存場所が作成できたら、前回インストールしたVSCodeで保存場所を開いてみましょう！ 作成したフォルダーの中で右クリック→Codeで開く を選択します。 (本記事では、デスクトップの中に作ったオリジナルサイトというフォルダーの中で右クリック→Codeで開く を選択しています。) <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/7e57b4c53e4e452fa320281df77f6071/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%202023-02-16%2017.28.03.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/d3a10b6a85b04eb3a43bf055f8a87282/image.png" alt=""> このようにVSCodeが立ち上がれば大成功です！👍 <h2 id="h303dcddcbb">HTMLを書いてみよう</h2><h3 id="h3f68580ccf">HTMLファイルを作ろう</h3>では、ここから主にVSCodeを使用してサイトを作成していきます！ まずはHTMLファイルを作成します。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8f0d15638b5a48949755b4669386f072/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-16%2017.49.21.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/08e30049f86645acbcfdafd0ec11883e/Image%202023-02-20%2014.36.44.png" alt=""> これで、HTMLファイルの作成が完了しました！ この時点でHTMLの保存場所にindex.htmlというファイル名のHTMLファイルが作成されています。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8550b7eb120447b896601b612475ba4e/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%202023-02-20%2014.39.15.png" alt=""> ちなみに、このHTMLファイルをダブルクリックで開くと真っ白なサイトが開きます。(中身が無いので当たり前ですが、、) これからこのHTMLファイルにコードを書いていきましょう！ <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/cf34ede1a6c441059bf4cf61091c0966/index.html%20-%20%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-20%2014.48.04.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/855d1fdfcb67422b8472139f8814d02e/notenecbw_L%202023-02-21%2013.56.15.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/bac3d689320f406eb40a29bb4f2bf302/Image%202023-02-20%2014.49.50.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/fe78a66007f949c19c05ed68b2675096/index.html%20-%20%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-20%2014.52.57.png" alt=""> 「なんじゃこりゃ！！」 と思われるかもしれませんが、VSCodeの機能でHTMLファイルに「!」と入力・Enterキーを押すと HTMLのテンプレートを作成することが出来ます。 これはEmmetエメットと呼ばれる、省略したコードを書いてEnter、Tabキーを押すだけで記述できる機能を用いています。 VSCodeではEmmetに標準で対応しているので、「!」と入力するだけでHTMLのテンプレートファイルが作成できます。(とても便利！) この作成されたテンプレートの中身を書き換え・書き足していってサイトを作っていきます。 <h3 id="h0205317460">出力されたHTMLのテンプレートを見てみよう</h3>自動的に挿入されたHTMLのテンプレートについて少し覗いてみましょう。英語ばかりでとっかかりにくそうですが、内容はそれほど複雑ではありません。 まずは1行目に<code>&lt;!DOCTYPE html&gt;</code>と記載されています。これは「HTML5という最新のバージョンのHTMLファイルをこれから記載します」ということを意味しています。 2行目から12行目が<code>&lt;html lang="en"&gt;&lt;/html&gt;</code>という風にhtmlタグが記載されています。この中にhtmlの内容を記載していきます。また、<code>lang="en"</code>は、言語が"英語(English)"のサイトであるということを表しています。日本語のサイトを作る場合は<code>lang="ja"</code>と変更することにより、"日本語(Japanese)"のサイトであることを意味するようになります。今回は日本語のサイトを作るので、lang="ja"に変更しておくことが望ましいです。(サイトの表示には問題ないですが、学習のためぜひlang="ja"に変更してみましょう。) 3行目から8行目が<code>&lt;head&gt;&lt;/head&gt;</code>という風にheadタグが記載されています。この中の詳細は別記事で解説する予定ですが、主にサイトの画面には現れない部分についてのコードを記載することになります。 そして9行目から11行目が<code>&lt;body&gt;&lt;/body&gt;</code>という風にbodyタグが記載されています。この中は今何も記載されていないため、この中にコードを打ち込んでいくことによってサイトを作成します。 さぁ、ここからbodyタグの中身を書いていきましょう！ <h3 id="h3324f707cd">「見出し」を表すh1, h2, h3タグ</h3>ここから実際にコードを書いてみましょう。 bodyタグの中に、<code>&lt;h1&gt;自己紹介サイト&lt;/h1&gt;</code>と書いてみましょう。 h1タグは見出しを表します。またh2タグやh3タグ,h4タグ,h5タグ…というのも存在します。全部見出しです。 どう使い分けるのかというと h1 画面タイトル h2 大見出し h3 中見出し h4 小見出し h5 更に細かい小見出し h6 更に更に細かい小見出し… といった感じで使い分けます。 そのため、h1タグは基本的に1ページにつき最大1つのみ書くようにしましょう。(h2～h6は好きなだけ書いてOK) 今回は1ページのみの自己紹介サイトを作る予定なので、h1タグで「自己紹介サイト」という文章を表示させようと思います。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/fc712ca4f7cc4c14a9d5aa31a529fe39/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.00.54.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/aeabaf7b435b4d1792a4e47664a82bc8/notenecbw_L%202023-02-21%2014.02.03.png" alt=""> 最後に、今後コードが見やすいように文の行頭に空間を空けておきましょう。 行頭を空けるためには、行頭でTabキーを押すことによって空けることが出来ます。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/aa958bedb247478ba826abd6e799a54f/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.24.00.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/541f16852123464b818b1f32f4c14c9b/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.24.47.png" alt=""> これで、bodyタグの中にh1タグが含まれているということが分かりやすくなったのではないでしょうか。 このようにコードが見やすいように行頭に空間を空けることをインデントと言います。 「インデントを空けてください」と言われたときは、「行頭を空けてコードが見やすいように字下げしてや～」という意味となります。 ちなみに、こちらの環境では1つのTabキーで2つ分のスペースを空けるように設定しています。 デフォルトでは1つのTabキーで4つ分のスペースが空いているかと思います。 この設定は好みなので、もしTabキーのスペースを変更したい場合は設定方法をぜひ調べてみてください。 h1タグを書いてインデントを空けるところまでできたら、ctrlキーコントロールキー + sキーを押してindex.htmlを上書き保存しましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/d7ed60e5aaba4819810792cb6ffc3d9b/notenecbw_L%202023-02-21%2014.34.21.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/3cdc32be9dad4bb79d909689c23fddd8/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.36.19.png" alt=""> さあ、エクスプローラーのindex.htmlを表示してみましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/a9823535822641b0b98979203b108fd3/Image%202023-02-21%2014.46.52.png" alt=""> このように文章が表示されましたか？ 正常に文章が表示されたら、次の項へ進んでいきましょう！ <h3 id="h043f2db3f8">「要素をまとめる」divタグ 「段落」を表すpタグ 「リンク」を表すaタグ 「画像」を表すimgタグ 「行内の要素」を表すspanタグ</h3>

この記事では、実際にHTMLを一緒に書いてあなただけのサイトを作り始めます。 前回導入したテキストエディタを使用して、一緒にHTMLを書いてみよう！

【Web開発編 第2回】HTMLを学んでみよう！

<h2 id="he8ff15b0ca">そもそもWebサイトってどんなもの？</h2><h3 id="h82a6404d8c">Webサイトとは</h3>Webサイトとは、パソコンやスマートフォンのブラウザから見ることの出来る画面のことです。 ちなみにブラウザとは、例えば GoogleChromeｸﾞｰｸﾞﾙｸﾛｰﾑ や、Safariｻﾌｧﾘ、MicrosoftEdgeﾏｲｸﾛｿﾌﾄｴｯｼﾞといったものがあります。パソコンやスマートフォンに最初から入っている方が過半数のため、すでに知っている方、一度は耳にしたことがある方も多いのではないでしょうか？ 今はもう滅多に聞くことのなくなったInternetExplorerインターネットエクスプローラーもブラウザの一つです。<h3 id="h36c1dc7783">HTMLとは</h3>Webサイトを表示するための構成を記述するための言語がHTMLｴｲﾁﾃｨｰｴﾑｴﾙです。初めてHTMLという単語を聞いた方には、なんとなく難しいイメージがあるのではないでしょうか？(自分がそうでした。) HTMLという言語を学ぶだけで、あなただけのWebサイトが作れてしまうので、後の記事で一緒に学んでみましょう！<h3 id="h56456981e9">HTMLを書くために</h3>HTML言語をパソコンで書くためには、テキストエディタを入れる必要があります。(ほんとはメモ帳アプリでも書けるけれど、専用のテキストエディタで書くことにより、HTMLを書くための便利機能が使えたり、HTMLの書き間違いを防止する機能が使えます。) 本ブログではVisualStudioCodeビジュアルスタジオコードをお使いのパソコンにインストールします。(Windowsを作ってるマイクロソフトという会社が作ってるアプリで無料だよ)<h2 id="h9f32c83c87">テキストエディタをPCにインストールしてみよう</h2>本記事では、VisualStudioCode(今後VSCodeブイエスコードと略します。)をPCにインストールし、更に今後Webサイトを作りやすくするよう拡張子を表示する設定をするところまで解説します。 では、早速VisualStudioCodeをパソコンに入れてみましょう！下記のリンクからインストールしてください。 <a href="https://code.visualstudio.com/download" target="_blank" rel="noopener noreferrer">VisualStudioCodeダウンロードサイト</a> ご利用の端末のOSを選択して、VisualStudioCodeをダウンロードしてください。 ※2023/2/12時点でのサイト画像です。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/3f5b351888f74c5da6c08428e6cc1060/Image%202023-02-13%2015.16.21.png" alt=""> ここから下はWindows11の端末にVisualStudioCodeをインストールする手順を説明します。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/a85bbb60c571406ebb1bc15c897e76b8/Image%202023-02-13%2015.20.22.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/21f28ca358754b84af541ae598330cae/Image%202023-02-13%2015.22.56.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/6eba7e72dc9740fc81627bc3ad6af1d5/Image%202023-02-13%2015.27.53.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/94b5e53d6e05440e908e7431c9b33e31/Image%202023-02-13%2015.29.54.png" alt=""> 下記画像について、 ・エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する ・エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する を追加しておくと、エクスプローラー内で右クリックすると、VisualStudioCodeで開く選択肢が表示されます。 個人的にはめちゃくちゃ便利なので、迷ったらぜひチェックを入れてみてください。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/88e7f8f67f834ae880fb377e4d681e89/Image%202023-02-13%2015.30.38.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/b53f812faaaa46a1a5addebd99d946cb/Image%202023-02-13%2015.35.42.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/91c633e6ae114b02a3af0052746285c6/Image%202023-02-13%2015.36.18.png" alt=""> 以上で、VisualStudioCodeのPCへの導入は完了です！お疲れ様でした！！😊 <h2 id="had20a6dffb">Webサイトが作りやすくなるよう拡張子を表示する設定に変更しよう！</h2><h3 id="h978d81ce94">拡張子とは</h3>ファイルの種類を表すものが拡張子と呼ばれます。 例えば、画像の場合はpngやjpg、テキストの場合はtxt、動画の場合はmp4、音楽の場合はmp3…などなど。。 音楽再生機器に「mp3プレーヤー」というものがあったりしますが、そのmp3というのは拡張子のことを言うんですね！ (※ほんとは実際のmp3プレーヤーはmp3拡張子以外も入れることが出来るみたいですが、それはまた別の話…。) 例えば「思い出の画像1」というファイル名で画像を保存した場合、 実はPCの中では「思い出の画像1.jpg」といったファイル名などで保存されています。 この「.jpg」部分を表示させる設定をこれから一緒に行っていきましょう！ <h3 id="h8db3cbb069">拡張子を表示すると何が良いの？</h3>先ほどの例で画像に「.jpg」を表示させたところで、普段パソコンを使っていても 「で？」って感じだと思いますが、 Webサイトを作る上では、非常に便利なものに変わります。 例えば、HTMLを使用して「思い出の画像.jpg」という画像を表示させる場合、「思い出の画像1」とだけ書いても表示されません。 ちゃんと「思い出の画像1.jpg」と拡張子を含めたファイル名を指定してあげないといけないんです😥 「思い出の画像1.png」でも「思い出の画像1.txt」でもダメなんです。「思い出の画像1.jpg」です。 そういった拡張子の指定を間違えないようにするためにも、エクスプローラー上で拡張子を表示することが大切になってきます。 <h3 id="haf4975648c">拡張子を表示する設定方法</h3>Windowsで拡張子を表示する方法を解説します。 エクスプローラーを立ち上げて、下記画像を参考に、拡張子を表示する設定にしてみましょう！ Windows10の方は下記の方法 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/1b237ee0747e4412a1007a8b78eb5466/PC%202023-02-13%2015.47.38.png" alt=""> Windows11の方は下記の方法 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/5a0874f78b174331be8cff59dc3f9aae/Image%202023-02-13%2015.46.05.png" alt=""> 以上で、拡張子を表示する設定変更は完了です！お疲れ様でした！！😊

Webサイトを作成するために、必要となるのがHTMLです。HTMLという言語を記述して、Webサイトの構成を作っていきます。 このページでは、Webサイトを作るための準備としてHTMLという言語を書くためのテキストエディタを一緒にパソコンに導入しましょう！

【Web開発編 第1回】Webサイトを作るための準備をしよう！

<h2 id="h7aef355fab">どうして環境を移行しようと思ったのか</h2>WordPress環境の場合、レンタルサーバーが必要になります。レンタルサーバーには「Xserver」や「さくらのレンタルサーバ」といったものがあります。 このレンタルサーバー代に、安くても約500円程度かかってしまうので趣味のブログサイト運営のコストとしては地味に高いですよね。 (500円の場合1年間だと6,000円…焼肉食べにいけちゃいます🥩) そのため無料で運用できる環境がないか調査してみたところ、Vercel + Next.js + microCMSという組み合わせが気に入ったのでご紹介させていただきます。<h2 id="hf305ee5073">WordPressとは</h2>WordPressとは、よくブログサイトを構築するために使用されるシステムです。 このWordPressのシステムを用いることで、プログラミングが出来なくても高品質なブログの作成ができます。 またWordPressのプラグインという機能で、ブログサイトを豊富にカスタマイズすることができます。<h2 id="hbeb3493814">Vercelとは</h2>「Vercel」というWebホスティングサービス(Webサイト等を公開できるサービス)の登場で ・高パフォーマンス ・無料～ で運用できます。 Webホスティングサービスには「Vercel」の他、「Netlify」や「Cloudflare Pages」などがあります。<h2 id="h4d50e8632f">Next.jsとは</h2>Next.jsはReactベースのJavaScriptのフレームワークです。 Reactというのは、効率よくUIが作成できるJavaScriptライブラリ。 Next.jsというのがReactにサーバー機能を付加したものです。 後述のmicroCMSへの接続のためサーバー機能が必要→Next.jsを使用します。<h2 id="h7f0f3e295c">microCMSとは</h2>microCMSとはAPIベースのヘッドレスCMSです。 ブログはこのmicroCMSに書いていきます。 WordPressからVercel + Next.js + microCMSへ移行するメリットとして、 Next.js(ブログシステムの処理)とmicroCMS(ブログの執筆)が分離できる面があります。 ここまでの全体の流れとしては ①microCMSでブログを書く ②Next.jsで表示するブログを処理する ③Vercelで表示するブログを配置する となります。(※ざっくりとしたイメージ)<h2 id="h07823ff784">環境を移行してみた感想</h2>【良かったところ】 ・アニメーション、3D描画、より凝った表現などNext.jsを使用するため比較的簡単に実装可能 ・月額料金のサーバー代がかからなくなった 【課題点】 ・WordPressの便利なプラグインは使えないので、基本的に自分で実装する必要がある ・microCMSのAPI数が無料プランだと最大3つなので、大規模なブログ運用をする場合はmicroCMSの有料プランを検討する必要があるかも <a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">https://microcms.io/pricing</a><h2 id="ha214098e44">まとめ</h2>趣味レベルのブログの場合、個人的には環境を移行して大正解でした！ ただしVercelの無料プラン(Hobbyプラン)は、規約的にアフィリエイトサイトなど収益化ができません。 収益化を考える場合は ①Vercelの有料プランに加入する ②Cloudflare Pages + Next.js + microCMSなど、収益化OKな別のホスティングサービスを使用した組み合わせ 等で対応する必要があります。 ちなみにVercel + Next.js + microCMSの組み合わせの実装は以下の記事が非常に優秀でしたので、ぜひ参考にしてみてください。 <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog/</a>

従来まで本ブログをWordPressで構築していたのですが、WordPress環境のサーバー代が毎月1,000円くらいかかっていたのでVercel + Next.js + microCMS環境へ移行しました。

BLOG

カテゴリー