お久しゅうございます。
糸凪邑です。
記事を書くたびにお久しぶりと書いているような、そんなデジャブに襲われるのですが、はて。
気づけば世間は暑苦しい空気が漂い始めました。
夏を省略するボタンとか、とち狂って夏眠システムを搭載した安眠カプセルみたいなものを開発してくれませんかね。
太上老○のアレ的な。
しかし、今年は草を喰む趣味を覚えたために、体力不足と日光への多少の耐性が付き、例年よりは楽に過ごせるんじゃないかと思っています。
ついに太陽に膝を屈することなく秋という楽園へ入ることができるのでしょうか。
好ご期待、とか言っちゃうと絶望するんで言いませんが、皆々様命を大事に無茶せず過ごしていきましょう。
さて、今回は無料縛りでプログラミングを学んで、無料でサイトを作るお話です。
以前、JavaやらC#はAndroidやUnityでそれとなーく薄っすらと触っていたのですが、ふとWeb系の言語を触ってみようと思って、勉強がてらやってみました
今回はちょいと調査も兼ねて、
学習はオンライン学習サイトの無料コンテンツのみ。
で、自分で書いて自分でわーいってやるだけのもあれなので、その実験場として無料レンタルサーバーを借りて公開することに。
ついでに、ドメインは以前聞いた無料ドメインの取得を試してみました。
その結果がこちら。
「HollowCradle」
http://hollowcradle.cf
現状、内容の無いぺらぺらしたものですが、作ったばかりなのでそこは置いといて。
この.cfっていうドメインは多分見たことが無いと思うんですけど、どうですかね？
少なくとも僕も見たことがないです。
調べてみると、どうやらこれは中央アフリカに割り当てられたドメインらしいです。
「.cf - Wikipedia」
https://ja.wikipedia.org/wiki/.cf
今回の記事を参考にやってみると、こんな感じで「変わり種の無料ドメイン」と「無料のサーバー」、そして「広告の無いサイト」を作ることができます。
間違ってもスマホの下からふわーって浮かんで来てミスタップしてしまうようなうざ苦しさ極まる広告は出てきません。
広告が無くて、動きもそんなに悪くなくて、聞いたことがない類とはいえ独自ドメインもついてくる。
何と素晴らしい。
てなわけで、今回はここに至るまでにやったことを完結にまとめてみました。
Web開発やプログラミングに興味がある方で、金銭的リスクを追わずに学習&実践してみたいって方はご覧くださいませ。
無料学習サイトで基礎を学習
まずはHTML,CSS,Javascriptについての学習。使用したのはこれらの学習サイト。
自分が納得できるまで該当する講座をつまんでみました。
「初心者でも楽しく学べるプログラミング入門サービス | paizaラーニング」
https://paiza.jp/works
「Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]」
http://prog-8.com
「ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト」
https://dotinstall.com/
サービスによってはアプリ版があったりするみたいなので、気になる方はGoogle PlayやiTunes Storeへ。
無料レンタルサーバー
今回使用したのはこちら。「Xdomain」
https://www.xdomain.ne.jp
無料レンタルサーバなんていくらでもありますが、容量がそこそこでかくて、条件付きだけど広告も出ないってことから選択。
このXdomainで使える無料サーバーは3種類。
・PHP&MySQLサーバー
・HTMLサーバー
・WordPressサーバー
・HTMLサーバー
・WordPressサーバー
今回はHTML,CSS,Javascriptでガリガリ手書きしていきたいので「HTMLサーバー」を選択。
無料ドメイン
お待ちかねの不思議ドメインはこちらから取得。「Freenom - A Name for Everyone」
http://www.freenom.com/
導入はここらへんを参考に。
「無料の「独自ドメイン」.tk.mlを取得しロリポップサーバーで使ってみた | とある女子の旅行目録」
https://forever-trip.com/domain-tk-ml-lolipop
「無料サーバー+フリードメインで完全無料サイトを30分で作成する │ revdev」
https://revdev.work/c0d3man/posts/g3ap2nwpj3shexclpdti
「無料で独自ドメインを取得できる！無料ドメインの取得サービス6選｜ferret [フェレット]」
https://ferret-plus.com/8797
他にも無料ドメインの取得サービスはいろいろあるみたいですね。
Xdomainの独自ドメイン設定に関してははこちらを。
「ドメイン設定 | Xdomain」
https://www.xdomain.ne.jp/manual/man_server_domain_setting.php
僕はWhois認証を利用しました。
Freenomでドメインを取得する際に一緒にその設定ができるのですが、ここではXdomain側の指定するネームサーバーの数とFreenom側に設定できる数が合わないので、ドメイン取得後に設定しましょう。
諸々の項目を記述し、ドメインを取得できたら、そっからFreenomにログインして、Xdomainのネームサーバーを登録、その後Xserver側の設定もすればおしまい。
次の日にはそのドメインで自分のサイトが表示できるようになります。
以上、無料学習サイト＋無料レンタルサーバー＋無料ドメインを使った無料サイト作りでした。
もちろんこれは実験場ですから、ちゃんとしたものを作る場合はドメインもサーバーも有料のものを借りるべきでしょうし、僕もそうします。
PHPで大丈夫って人はPHP&MySQLサーバーを借りて試せるみたいですが、それでも本格的にやるとなると容量や機能的に足りなくなると思います。
そもそもPHP以外の言語、例えばPythonやJavaやnode.jsやRubyといった言語は無料サーバーじゃ動かせないですから、そこらへんを使いたい場合は別のところと契約するか自分でサーバーを立てるしか無いですね。
有料ドメインや有料サーバーの場合はこういう選択肢がありますので、ご参考に。
「Xserver」
https://www.xserver.ne.jp/
「 CORESERVER（コアサーバー）」
https://www.coreserver.jp/
「お名前.com」
https://www.onamae.com
「さくらVPS（仮想専用サーバー）｜さくらインターネット 」
https://vps.sakura.ad.jp/
あと、今回は無料でできる範囲でしかやってませんけど、学習サイトの有料コンテンツは十分に試す価値があると思います。
現実で使われているコンテンツやシステムの作成方法とかの実践的な内容であればなおのこと。
あるいは自分が作りたいものがあって、それに近いものを学べる時ももちろんですね。
価値ありと思ったら、ためらわずに自分のために課金しましょう。
無料にこだわる場合、英語が多少読めればこういう海外のサイトも選択肢になります。
「Udacity」
https://www.udacity.com/
「Learn to Code - for Free | Codecademy」
https://www.codecademy.com/
「W3Schools Online Web Tutorials」
https://www.w3schools.com/
今は大学の講義すら無料で公開している時代ですからね、そういったものにもアクセスすることができます。
「edX | Online courses from the world's best universities」
https://www.edx.org/
「Coursera | Online Courses & Credentials From Top Educators. Join for Free」
https://www.coursera.org/
「mooc.org | Massive Open Online Courses | An edX Site」
http://mooc.org/
金銭的なリスクを負いたくないのであれば、時間という資源を代わりに捧げてこんな感じに色々探してみましょう。
では、今回はこんな感じで。
質問、感想などございましたら、是非教えてくださいまし。
何かしらのお悩みやご要望なども同様にどうぞ。
時間的な都合で個別にお返事することは難しいと思いますが、全部目を通しますし、記事に出来ることは記事にしていきます。
何より嬉しいので記事を書くモチベが上がります。
それと「面白かったよ」とか「ためになった」って場合は、TwitterやFacebookなどで共有してもらえるとありがたいです。
僕の感謝にいか程の価値があるかは存じ上げませぬが、とてつもなく感謝いたします。
また、もしこのブログの更新情報をお求めの場合。
その際はブログの下の方にあるフォームから登録していただければ、ブログ更新時にメールが届くようになりますので、こちらも宜しければどうぞ。
一応ですけど、登録したからといって、関係の無い変なメールが届くことはありませんのでご安心を。
もしメールが届くのが嫌って場合は、「空藍の揺り籠」のTwitterでも流すようにしてますので、そちらをフォローしていただければ。
空藍の揺り籠 | Twitter
おまけ
今回作ったHollowCradleのサイトには、「ToyBox」っていう項目がありますこれはいつも通り好き勝手作っては放り投げる場所です
この記事を公開する時点では「Game of Life」しかないですが、これから作ったものを載せていきますので期待せずお楽しみ。
「つーか、Game of Life何ぞ？」って方はこちらをご覧ください
「ライフゲーム - Wikipedia」
https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0
ついでにこれを作る際に参考にしたサイト達がこちら。
「Conway's Game of Life - Javascript/Canvas Implementation」
http://pmav.eu/stuff/javascript-game-of-life-v3.1.1/
「50行で作る、HTML5+JavaScriptを使った簡単ライフゲームづくり - コードレシピ」
http://coderecipe.jp/recipe/UBsk3rPZSX/
「HTML5 canvasで始めるゲームプログラミング」
http://jscanvas.hatenablog.com/
「[JS]HTML5 Canvasを使ったライフゲーム | PHP Archive」
https://php-archive.net/html/game-of-life-for-canvas/
上記に乗せてある学習サイトでHTML,JavascriptとおまけにCSSを一通りこなしたあと、これらの記事を参考にしながらやれば同じものが作れるようになります。
興味がある方はぜひ。
コメント
コメントを投稿