仮想ウェブサイト構築プロジェクト：歯医者のサイトを作って公開する
プログラミングスキルつけたいなと思っている方はぜひご覧いただきたい記事を作成しました！今後、作成していくNoteのサイトマップ的な位置づけにできたらという思いです。まだまだ全然できていなくて道半ばなのですが、先行的に公開し（その意味で価格も100円としています）、継続的に更新を掛ける予定です。
＜主な更新履歴＞
2021年2月20日：有料エリアのAboutUsの内容を追記
⇒記事の総文字数5,570文字
2021年11月29日：完成ページのABOUT USのページを追加。そのページを公開URLからも確認することができるようになりました。公開したURLは以下をご参照ください。
https://dentalsuikou.herokuapp.com/about.html
⇒記事の総文字数6,170文字
2021年11月30日：完成ページのABOUT USの解説Noteを追加しました。当Noteの該当セクションをご参照ください。
お客さんから要件を聞き、それを要件定義という形で明確化、その内容に従って開発して公開・納品するという一連の作業を1人で行うというフリーランススキル、Pythonでデータを扱うスキル・ウェブページへのデータを引き渡すスキル、HTMLやCSS、Javascriptを使って、フロントエンドを構築するスキル、等々、一つのウェブページ作成を行うことで、得られるスキルは山のようにあります。
自分で全部できたらめちゃめちゃ素敵！！
そこで、今回はそれらのスキルを一つの題材である歯医者のサイトを立ち上げるという仮想ケースを用いて体験してスキル向上につなげてもらいたいと思いでマガジンを立ち上げました。
このマガジンは、
Djangoで歯医者のサイトを一人て作って公開・運営する
と題した有料マガジン・有料記事です。購入いただくと、ウェブページで必要ないくつかの機能の実装方法を習得することができます。
この記事から始まるシリーズものを継続して購入いただくと、具体的にはHTMLやCSS、Javascriptといったウェブの言語関連における事項と、Python/Django関連の事項の2つの全体像がわかるようになります。
【HTMLやCSS、Javascriptといったウェブの言語関連】
・Home画面においてアニメーション付きのウェブサイトが実装できます
その①：Home画面の前半パート
その②：Home画面の後半パート
・Aboutページで歯医者の特徴をわかりやすく、見やすい感じの実装ができます
・Blogページで、最新の情報や、院の様子を投稿する機能を実装できます
(すいません、鋭意作成中につきできたらNoteを追加します)
・Contactページで問い合わせ機能を実装できます
(すいません、鋭意作成中につきできたらNoteを追加します)
【Python/Django関連】
・上記の機能が実装されたサイトを今話題のPythonの中で人気の高いDjangoというウェブフレームに乗せることができます
その①：Djangoを入れる方法
その②：DjangoでHello Worldを表示する方法
・Djangoで作ったサイトをHerokuというサービスを用いて全世界に公開することができます
(すいません、鋭意作成中につきできたらNoteを追加します)
といった内容です。
■完成ページ
早速、今回のマガジンを通読いただいた先に完成するページのイメージを紹介します。以下は完全に無料の公開方法(Herokuというサービス)によって公開しているサイトページです。無料なので、サイトのスピードは遅いです。が、SSL対応はできているので、セキュリティ的には安心です。（機能として実施する方法も紹介していきます。）
※2021年1月24日時点では最初のページとCONTACTページしか実装していないため、エラーの状態です(例は以下のabout)。以下の記事もすべてのメニューの実装が完了していない状態となります。ただし、現時点でできていないだけで、必ず最終的には完成させます。
※2021年11月29日時点で、ABOUT USのページを公開可能な状況にしました。機能自体は、HOME画面から見えるものとそれほど大差がないβバージョンになっているため、今後継続していく可能性もありますが、Python内での写真の参照を疎通させ、全体としての機能について最低限の状況を作成した形となります。以下のURLを直接クリックいただくと、今回追加したページに飛ぶことができます。
■手っ取り早く完成のものからやっていきたい場合（テンプレートを入手したい場合）
まずはテンプレートを入手したいという方は以下にいきなり飛んで学習を進めていくことをお勧めします。上記の公開サイトは、一部の機能がDjangoというPythonのフレームワークを使って実装されたものですが、以下の記事を購入いただいた際に入手できるテンプレートはそのフレームワークに乗せる前のHTMLやCSS、Javascriptを用いたDjangoへの実装前の全体のファイルになります。
これだけでも個人的にはかなり使えるものになったと思います。普通に、、
全然値段以上！！
各種部品が実装された一つのファイルになっていますので、そこから取ってきて関数のように使っていただくのもよし、このファイルを用いて案件に活用いただくのもよしです。HTMLやCSSやJavascriptが一連でセットになったファイルの使用が可能になり、すぐに案件に対応できるようになります。
皆さんは普段何のウェブフレームワークを使用していますか？Reactや、Wordpress、PythonのDjangoやFlask等、昨今のウェブフレームワークはかなりの数があるため、何も手を付けていないHTMLファイルを各業界用のサイトのものとして持っておくことは、開発者にとっては必須なのではないかと私は思いますので、ぜひ活用ください。
■想定読者
・Pythonでサイトを作って公開するまでを体験したい会社員の方（非エンジニア）
これから何かスキルを身に着けたい場合、Pythonでウェブサイトを作ることができるといえるとアピールになる
・副業でサイト作成をしたい会社員の方（非エンジニア）
1つ目とも重複しますが、サイト作成を行って副業を始めたい方は、何か1つ自分で作るということがとても重要です。これがこのマガジンで一緒に1つ作り上げてウェブサイトの公開までできるようになっておくことで、自分のポートフォリオとしてアピールできます。
また、今回は歯医者のサイトを想定しますが、やり方さえわかれば、これを歯医者だけでなく、鍼灸院であったり、美容院であったり、業種は問わず対応できるようになります。
・Wordpressとの比較をしたいPHPコーダーやWordpressエンジニアの方（エンジニア）
私もこの分類になるのですが、Pythonのウェブフレームワークとどう違うのかがわかります。これによって、技術選定の際のメリット・デメリットの説得力が増すと考えられます。ひいてはお金持ちで自由な生活を送れるようになるはず。
ここまでで、この記事が想定している読者や、どのようなことをしていきたいか、なぜ、これを作成していくかということをご説明しました。
では次に今回のウェブサイトで実装される機能について、Home画面に実装されている機能、および、各個別ページに実装されている機能について全体を俯瞰することを目的にしてご紹介します。
※購入に際してのポイント１：以下は機能として何を実装するかを紹介するもので、実際に実装する方法を紹介するものではないのですが、今後歯医者ページとしてどう作っていくかの指針を理解する上では、かなり重要な記事となります。実際のコードを使った紹介はこの後に記載していきますので、その点はご了承ください。
※購入に際してのポイント２：このような機能があれば、実装したいと考えながら、以下については読み進めていくことが自分の実装力や要件定義力の向上につながると思っています。自分だったら、このセクションにこういう機能を作るな～と想像力を働かせながら読んでいってください。また、何かあればコメントで残してもらえると、バージョンアップの際に参考にします
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか？