iPadだけで自作ウェブサイトを作る

この記事ではiPadだけでウェブサイトを1から作ってみようと思います。

使用したのはiPad Pro 12.9インチの第二世代ですが、無印のiPadやiPhoneでも同じことができるはずです。この記事もiPad Proで書いています。

GitHubでアカウントを取得する

ウェブサイトを公開する場所を確保しなければなにも始まりません。GitHubのアカウントを取得するために、GitHubの公式サイトにアクセスしましょう。

GitHubの公式サイト

英語なので戸惑ってしまうかもしれません。フォームにそれぞれの値を入力してサインアップしましょう。

  • Username: 取得したいアカウント名
  • Email: メールアドレス
  • Password: パスワード

私はmigaraiaというユーザー名で取得してみました。すると次のような画面が出ます。

Create an accountをタップして次に進みます。

特にチェックは入れずにContinueをタップします。ウェブサイトを公開するだけなら無料プランで十分です。

最後にアンケートが表示されます。今回はなにも入力せずにSubmitをタップします。

このような画面が表示されたら成功です。

メールでアカウントを認証する

アカウントを取得したら、登録したメールアドレス宛にGitHubからメールが届いているはずです。

Verify email addres をタップして、アカウントを認証しましょう。

登録したアカウント名とパスワードを入力しましょう。

Sign inをタップします。

最初の画面に戻ります。GitHubからアカウント認証が完了したメールが届きます。

リポジトリを作成する

Start a projectをタップしてリポジトリを作成しましょう。

あるいは画面右上にある十字のボタンからNew repositoryをタップします。

  • Repository name: リポジトリ名

リポジトリ名は「ユーザー名.github.io」としてください。私の場合はmigaraia.github.ioとしました。

Initialize this repository with a READMEにチェックを入れて、Create repositoryをタップします。

このような画面が出たら、リポジトリの作成は完了です。

Github上でindex.htmlを作成する

画面中央右のほうのCreate new fileをタップします。

Name your file… の欄に「index.html」と入力します。

またEdit new fileの欄に「Hello」と入力します。

画面をスクロールして、Commit new fileをタップします。

リポジトリの画面に自動で戻ります。index.htmlが追加されていたら成功です。

ウェブサイトにアクセスしてみる

この時点ですでにウェブサイトが公開されています。早速アクセスしてみましょう。

https://migaraia.github.io

この例では、後のサンプルも兼ねているので「こんにちは」と表示されます。

アクセスするアドレスは「https://あなたのGithubアカウント名.github.io」です。

Helloと表示されたら成功です。

もし表示されない場合は、数分待ってから再度アクセスしてみてください。Githubで公開するWebページは更新に少し時間がかかります。

ページを再編集する

リポジトリのページに戻り、index.htmlをタップします。

わかりにくいですが、画面の右のほうにある鉛筆のアイコンをタップします。鉛筆のアイコンはRaw Blame Historyの右にあります。

すると編集画面が表れるので、先ほどと同じ手順で内容を書き換えてみてください。

アプリでページを作成してアップロードする

Github上のエディタでは日本語が入力できません。テキストエディタなどでコピー&ペーストする方法もありますが、ページをアップロードする方法もあります。

今回はGoCoEditという有料アプリを使いました。

+ボタンをタップしてファイルを新規作成します。

編集画面に移るので、今度は「こんにちは」と入力してみます。

右上の丸が三つ並んでいるアイコンをタップして、SAVE ASを選びます。

ファイル名をindex.htmlにしてSAVEをタップします。

GitHubにページに戻り、今度はUpload Filesをタップします。

Choose your filesをタップして、ファイルを選択します。

ブラウズをタップして・・・

場所は「このiPad内」からGoCoEditを選び・・・

index.htmlを探して、タップします。

元の画面に戻ったら、Commit changesをタップします。

index.htmlの更新時間がjust nowになっていたら成功です。

https://migaraia.github.io

「こんにちは」と表示されたら成功です。

表示されない場合は数分待ってから再読み込みしてみてください。

まとめ

この記事ではiPadだけを使ってGithubでウェブサイトを公開するまでを書きました。

パソコンを使うのに比べると多少の不便を感じますが、それでもiPadだけでウェブサイト作りを完結させられることがわかりました。

記事のタイトル「iPadだけで自作ウェブサイトを作る」| 公開した日付()| 更新した日付(2018年11月13日)| 更新した回数(6回)