【知識0】WEBページを簡単無料で公開する方法。全手順を解説します

プログラミング

自分で作ったものを公開したい!

プログラミング学習の成果をみんなに見てもらいたい!

こういった方に向けての記事です。この記事では、

知識0、無料、簡単にWEBページをネットに公開する方法をお伝えしていきます。

本記事では、GoogleAppsScriptというプログラム言語を使います。

GoogleAppsScriptのメリットは以下の記事にまとめています。

【初心者向け】プログラミングを無料で簡単に体験する方法
プログラミングを体験してみたいけど、始め方が分からない無料で!簡単に!手取り早く!プログラミングを体感したい!こういった方に向けての記事です。プログラミングを始めようと思ったときに、次の壁にぶち当たります。...

GoogleAppsScriptのメリットを簡単にまとめると

  • 環境構築不要
  • 完全無料
  • 作ったものを一瞬でインターネットに公開できる
  • 初心者おすすめの言語、JavaScriptを学べる

こんな感じです、初学者の方にとって圧倒的神ですね。

今回は『WEBページ』を公開する手順をお伝えしますが、プログラムを公開するのも同じ手順です。

ここで公開の手順を覚えれば、自分のスキルが上がるたびに、ハイレベルな成果物を公開できるようになります。

ですのでこのブログでは、

WEBページを最速・簡単・無料でネットに公開する

ことに注力して書きます。途中分からないことが出てくるかもしれませんが、一旦無視で手順を進めてください。

そんな細かいことは後から理解できるようになっていきます。まずは、

自分の作った物が、インターネットに公開されている

この興奮を覚えてください笑

オラ、ワクワクすっぞぉー!

ではいきましょう。

繰り返しますが、分からないことが出てきても無心で手順を進めてください!

WEBページを最速・簡単・無料でネットに公開する

手順1:Googleアカウント用意

ここは、割愛します笑 なんとかしてください!笑

ここさえクリアすれば、後はイージーゲームです!

みんな持っていると信じたい

手順2:Googleスプレッドシートを開く

Gooleホーム画面よりスプレッドシートを選択し、スプレッドシートを開いてください

スプレッドシートを開いたら、名前を変更しておきましょうか(あとでわかりやすい)

手順3:GoogleAppsScriptのエディタを開く

スプレッドシートから、GoogleAppsScriptのエディタ開きましょう

エディタとはプログラムを書く場所です。絵を書くときのスケッチブック的な感じです。

スプレッドシートの「ツール」-「スクリプトエディタ」をクリックしてください。

すると↓のようなエディタが開きます

これからここにプログラムを書いていくことになります。相棒ですね。

手順4:HTMLファイルの作成

さて、いよいよ本番です。WEBページの公開の段階に入っていきますよ!集中!!

WEBページの公開をするには『html』ファイルというものが必要になります。

冒頭に書きましたが、細かい知識はあとでついてきます。

そんなものがあるんだ!ふーん!!

くらいに思っていてください笑

エディタ画面から、[ファイル] -「New」- [HTMLファイル]を選択します

すると名前を入力する画面がでてきますので、『index』とでもつけておいてください。

すると、indexファイルが作成されていますね。

ここに謎のプログラムが書いてありますが、一旦無視で!

WEBページに表示するための情報と覚えておいてください!詳しい内容は別記事でお話します。

さて、少しだけHTMLファイルを編集しましょう。

<body>と</body>の間の行に、以下の文を入力してみてください。

<h1>初めてのWEBページ</h1>

すると以下のようになります

編集ができたら保存しましょう。「ファイル」 – 「保存」を選択しましょう

手順5:コード.gsの編集

続いて、『コード.gs』の編集を行います。

function myFunction(){ }と最初から書かれていますね。

最初に書かれているコードを全て消して、以下のコードを書いてください

function doGet() { 
   return HtmlService.createHtmlOutputFromFile('index');
 }

すると次のようになるはずです。

あっ編集後の保存は忘れずに!

手順6:ウェブアプリケーションとして導入する

さぁいよいよWEB公開の作業です

スクリプトエディタのメニューから「公開」→「ウェブアプリケーションとして導入」を選択します。



すると変な画面がでてきますが、次のように設定してください。(隠してるのは僕のアドレスです笑)

以上のように設定したら、「Deploy」ボタンをクリック!

はい、WEB公開終わりです!

次の画面でURLがでてきますが、これが正真正銘あなたのURLです!

URLへアクセスしてみてください。

はい、前世界に公開されています。

今回はこれでゴールです!!

まとめ

以上でWEBページの公開は成功です。

何度も言っているように、細かい知識は徐々につけていきましょう!

ここからのアクションプランとしては、

  • HTMLタグを理解する(<body>タグの意味など)
  • プログラミングスキルをあげる(GoogleAppsScript)
  • レベルを上げて、WEBページを更新

成果をすぐに見てもらえるとモチベーションが上がりますよね!

WEBページ公開の手順は習得できたのですから、

これからはスキルアップに全力を注ぎましょう!!

そして、最高の成果を見せつけてやりましょう!!

ではっ!

コメント