#まずは環境を用意しましょう
パソコンはWindows10を使います
ぼくは、Windows派……というか、手に入りやすいパソコンがWindowsだったというだけなんですが。
パソコン1台だとちょっと物足りない。
開発用のエディター画面と、実行画面がそれぞれ同時に見られると非常に便利。ということで、ぼくの場合、縦長の画面が見られる『デル 液晶 モニター ディスプレイ P1914SF 19インチ スタンド回転式』の中古をヤフオクで2,420円(税込)で落札して使ってます。
なにしろ、サイトって、スマホ対応まで考えると縦長になりがちな代物なので。
メインのブラウザはGoogleChromeを使います。最近は、それが定番のようで。もちろん、他のブラウザも実行確認のために使います。飽くまで開発用の定番としてGoogleChromeを使うということ。
次にテキストエディターですが、自分が使いやすいものを使いましょう。
ぼくの場合は、Komodo Editというのをよく使っていましたが、最近はnotepad++を使うようになりました。
世間の定番は、どうやらVisual Studio Codeのようですが。
要は、レンタルサーバーとつなぐためにFTP(ファイル・トランスファー・プロトコル)の使えるエディターであればいいのです。
notepad++でのFTP接続方法
トップメニューのプラグインのうちのプラグイン管理を開きます。
プラグインのうちのNppFTPにチェックを入れてインストールボタンを押します。
トップメニューのプラグインにNppFTPが加わりますので、そのうちのShow NppFTP Windowを選択すると、画面右にNppFTPウィンドウが開きます。
NppFTPウィンドウの設定(歯車マーク)にあるProfile setting画面を開き、Connectionに必要な設定を行います。
Closeすれば勝手に保存されますので、あとはNppFTPウィンドウメニュー左にあるConnectアイコンを押して、必要なサーバーを選べば接続できます。
さくらエディター
あと、あると便利なテキストエディターがさくらエディター。
ファイルなどのテキストを手軽に扱いたい時に使いやすいです。
次の「ホームページ作りを始めましょう」のコラムで取り上げているFTPツールWinSCPのエディターはちょっと使いにくいので、さくらエディターを宛てます。
レンタルサーバーはロリポップを使います
もちろん、自分のパソコン、つまりローカルにサーバー環境を作っての開発も可能です。
その場合は、XAMPPを使うと便利です。
いわゆるLAMPと呼ばれるWebサーバー環境がすぐにできるから。
LAMPとXAMPP
OSがLinux、Webサーバーソフトウェア(HTTPサーバー)がApache、データベースがMySQL、使う言語がPHPということでLAMP。
XAMPPは、LinuxというOSがクロスプラットフォームということでXであり、言語もPerlも加えているため、そういう綴りになったということ。
オフラインの場合は、ローカルでのXAMPP開発もいいでしょうが、最近はオンラインが普通なので、レンタルサーバーを直接開発用に使うのが便利です。いずれにしても、そのまま公開(ローンチ)できるから環境の変化の影響もなくストレスレスでもあります。
ぼくの場合、ロリポップ(lolipop.jp)を昔から使ってます。リーズナブルで使いやすい(単なる慣れかな?)ので。
ロリポップには、ロリポップドメインという、面白いドメインがたくさんあって、特にこだわりがなければ、そのうちの一つを選んで使うといいでしょう。たとえば、ぼくの場合、アカウントをimaにして、ロリポップドメインをdaa.jpにしています。つまり、「今だ.jp」というわけ。かつて(今も残ってる?)、omise.com、つまり「お店どっと混む」としゃれたドメインがありましたっけ。
ということで、レンタルサーバーのアカウントはima、ドメインはdaa.jpとし、clinicというディレクトリを用意します。
ロリポップドメインはSSLに対応していない
ただし、ロリポップドメインは、SSL(インターネット上でのデータの通信を暗号化し、盗聴や改ざんを防ぐ仕組み)に対応していないので、httpsから始まるURLにできません。サイトをhttps化(SSL化)することはサイトの安全性のために必要なだけでなく、SEO(検索エンジン最適化)にも効果的なので、実際にローンチする段になったら、独自ドメインを取得しましょう。
独自ドメインは.comなど定番なもの以外にもいろいろとありますので、意味と価格を勘案して選んでください。
そして、法人でもなければ無理せず無料独自SSLに設定しましょう。
独自ドメイン
ある日のロリポップでの今月のおすすめドメインは、以下の通りでした。
.com 1,160円
ちなみにぼくが開発した.comは、次のようなものがあります。
https://fuku-jin.com/onazuke/ お名付け開運堂という占い師サイト
.net 440円
.co.jp 3,980円(日本法人用)
.jp 1,850円
ちなみに、ぼくのホームページは、.jpを贅沢にも使ってます。
https://info.key-web.jp/
どんなものを作ってきたか、興味があればご覧ください。
.tokyo 75円
.site 70円
.inc 98,000円(法人用)
ここにはないけど、やはり安かったので使っているのが、.online。たとえば
https://kimochi-tengoku.online/medobo/ やはり占い師のサイトで、易経。
デザインフレームはテンプレートで
さて、ホームページを作るには、サイトのデザインフレームが必要になります。
これを1から作るとなると、少なくともHTMLおよびCSS(ウェブページのスタイルを指定するための言語)の知識がないと大変です。CSSはそれなりの言語です。サイトデザイナーが仕事として成立するわけです。
そこで、世の中にあるテンプレートと呼ばれるデザインフレームをサンプルに使うことにします。
実際、プログラマーのぼくが個人で仕事を請け負う場合、デザインを依頼していてはリーズナブルな開発にならないし、顧客の要望を聞いていては少なくとも1カ月は余裕が必要になります。なので、サンプルを提示して、好みに合う候補を選んでもらい、それを微調整することで時間的費用的な課題を節約します。
したがって、ある程度はCSSの知識を持つ必要はあります。
テンプレートなら世界中から選択可能なので、かなりおしゃれなデザインフレームを手に入れることも可能です。
検索キーワードを「css レスポンシブ テンプレート」として探すといいでしょう。もちろん、必要であれば、「無料」とか「フリー」、あるいは「商用フリー」とかをキーワードに追加してお手軽なテンプレートを手にいれてください。
レスポンシブWebデザイン
レスポンシブWebデザインあるいはレスポンシブデザインとは、パソコン、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にできるデザイン方式。
このため、わざわざスマートフォン用に別途デザインを作る必要はないわけです。
レスポンシブにすることで、Googleに取り上げられやすいモバイルフレンドリーなサイトにもなるようです。
さらにGoogleのPWAを使うことで、Androidだけですが、スマートフォンにアプリアイコンを置くこともできます。つまり、GooglePlayやAppStore用のネイティブなアプリではなく、URLブラウザが裏で動く感じです。
それ以外にもIonicとかいう便利ツールもありますが、それは別途。
【レスポンシブの例】https://free-hp.net/
この記事が気に入ったらサポートをしてみませんか?