【２週間で学習】文系学生が独学で阿部寛のためにホームページを制作する

（引用元） みなさんはじめまして、杉下と申します。 突然ですが、みなさんは俳優の阿部寛のホームページって見た事ありますか？ほんとに突然で申し訳ないんですけど、僕はこの阿部寛のホームページが大好きなので、今から紹介させてもらいますね。

阿部寛のホームページ紹介

すごくないですか？もうこれは時代錯誤なんていう次元を通り越して歴史遺産ですよ、インターネット界のダッコちゃん人形です。この2017年にこんなにも「ホームページビルダー感」溢れるサイトがあるなんて涙を禁じえません。

この阿部寛のホームページなんですが、実は結構前からネット上では何かと話題になっていまして、2016年にページのリニューアルが発表された際には「この遺産が消えてしまうのでは」と心配する声がネットニュースになったりもしました。ホームページ文化の廃れつつある現代でも多くの人から愛されているんですよね。 しかし、そんな阿部寛のホームページにもたった一つだけ、大きな欠点があります。]

それは 「スマホに対応していない事です。」

（スマホで見た阿部寛のホームページ。文字も小さく、余白も気になる）

僕自身、趣味で1日に2、3回阿部寛のホームページをチェックするのですが、やはりパソコンで閲覧する様にデザインされているためか、目当てのページに思った様にアクセスしにくい事があります。

（特に好きな「メンズノンノ時代の阿部寛」のページ。とてもシュール。 引用元）

普段だったら「まぁいいか」と放っておくところですが、大好きな阿部寛の為とあっては黙っていられないので、今回は僕が自らこのホームページをスマホ対応にさせてみたいと思います。

しかし、ここでみなさんにお伝えしなければいけないのは、僕は「今までにホームページを作った事がないド素人」だという事です。 自分でホームページを作るにあたっては、HTMLやCSS、PHPといったコンピューター言語を学ぶ必要があるのですが、今回僕は「ホームページの作り方を学んだ上で阿部寛のホームページを作らなくてはいけないのです。」

ちなみに僕は以前に「iPhoneアプリの開発を勉強しよう」としたものの、参考書が全く理解できず、涙と鼻水で顔面をグチャグチャにしながらわずか１週間で挫折した事があります。（その参考書の表紙には大きく「サルでもわかる」と書かれていました。）

プログラミングは１週間で挫折するわ、GPAは1.8しかないわ、キャベツとレタスの違いは分からないわと、僕はあらゆる面で典型的なアホ大学生なので、今回のホームページ制作もすぐに挫折するかと思いきや、いざやってみるとめちゃめちゃ簡単に習得出来ました。

しかも２週間で出来ました。 なので、今回は僕が実際にホームページ制作を習得した過程をいくつかの記事にして見ました。

簡単な順序としては

• 環境設定をする
• 勉強する
• 実際にホームページを作ってみる

の３段階です。どれもサル未満でも出来たことなので、ホームページ制作を学んでみたいけどどうすれば良いかわからない、という方々は是非参考にしてみてください。

阿部寛のためにパソコンの環境設定をする

さて、では実際にホームページを作るための環境設定から順番に始めていきましょう。設定というと少し面倒に聞こえますが、５分もあれば終わります。料理で例えるなら買い物に行く程度の簡単なことです。ここではそれを3つのステップに分けて説明します。 ステップ

1.MAMPを導入。

まず、「MAMP」というフリーソフトをパソコンに導入する必要があります。このMAMPというソフトを使うことで、ホームページなどを開設するのに必要な「サーバー」をパソコンの中に構築することができます。 では、ブラウザーを開き「MAMP」と検索してください。そして、あとは

このページからMAMPのフリー版をダウンロードします。 そして次に、ダウンロードしたファイルを開き、MAMPをパソコンにインストールしましょう。

インストールが完了したら早速MAMPを開きます。

開くとこのような画面になるので一番右の電源マークのボタンを押してください。このマークが緑色に点灯すれば、「サーバー」の構築が完了したことになります。

2.MAMPにWordPressをインストール

次にWordPressというソフトウェアをMAMP上にインストールしていきます。このWordPressというソフトウェアは言うなれば「ただで簡単にちゃんとしたホームページを作るため」のものです。（それ以上のことは僕もよく知りません。）

では先程のように「WordPress」で検索します。

すると、おそらく検索結果の上から３番目までにはこのページに繋がっていると思いますので、ここにたどり着いたら画像右下のダウンロードボタンをクリックします。

ダウンロードが完了しましたね。ダウンロードされたこのファイルは圧縮されているので、まずはそれを解凍します。

そして解凍後に出てきた「wordpress」というファイルをMAMP内のhtdocsというフォルダーに移動させましょう。 それが出来たらもう一度MAMPを開きます。

開いたら今度は真ん中のボタンをクリックします。

するとブラウザが起動し、この画面が表示されます。そして次に赤線で囲ってあるリンク先へ進んでください。

リンク先には何やら小難しそうなページが用意されていますが、こんなものはこけおどしです。

今回の準備に必要なのは画像に記載した（１）のボタンをクリックした後、（２）枠内に任意の「データベース名」を入力するだけです。僕は今回「MyHomePage」と言うデータベース名にすることにしました。

この入力が完了したら右にある作成ボタンを押してください。 作成ボタンを押したら次はブラウザーの検索窓に「http://localhost:8888/」入力します。

すると、この画面に移動します。この画面は実はインターネット上ではなく、あなたのパソコン上にだけ存在するサーバーの中身を示しています。現に、画像内に写っているこの「wordpress」というリンクに先には先程移動させたWordPressのファイルが入っています。

このリンクをクリックすると

この画面に進みますので、このまま「さぁ、始めましょう！」をクリックします。

次はワードプレスをサーバーのデータベースに接続する必要がありますので、画像の通りにデータベース名とユーザー名・パスワードを入力します。下２つの項目は変更する必要がないのでこのまま送信ボタンまで進みます。

さぁ、長々と色々な設定をしてきましたが、この設定が最後です。

最後は実際にホームページを作りに当たってそのタイトルを決めましょう。僕の場合は「阿部寛のホームページ」当然ですね。そしてここのユーザー名とパスワードは先程とは違い、任意で設定できます。（実際にオンラインでページを公開する際にはパスワードの脆弱性には十分注意が必要です。）

全て入力し終えたら完了です！

先ほどの任意で決定したログイン情報を入力すれば…

出来ました！！ここまで来てしまえばあとは実際にホームページを作っていくだけ！阿部寛の喜ぶ顔が目に浮かぶようですね、みなさんにも見えますでしょうか？

さて、ホームページの制作の環境設定も完了し、ひと段落ついたので今回はこの辺りにしてAmazonPrimeで「結婚できない男」の続きを観たいと思います。いつ視聴期間が終わるかわかりませんからね。

次回についてですが、先にも述べたように僕はド素人なので、まずはコーディングを学ぶところから始めたいと思います。「何それ絶対読んでてもつまんないじゃん」って思ったそこのあなた！！

そんなことないですよ……

ではまた次回、お会いしましょう。