牙を抜かれた主婦の絵日記

育児マンガとどうしようもない独り言。お気軽にコメントください!

プログラミングド素人が1週間で占いサイトを作るまでの 7ステップ

こんなん作ってみた

f:id:BTAD:20150927234457p:plain
※あとで調べてみたら同じ名前の占いアプリが出てるようなので、念のため名称変更予定。

プログラミング、勉強しないとな~と
だらだら思いつつ

ちょっと勉強してパーツだけ作ってみて辞めたり、
そんなんを繰り返していたのですが、ちょっと本腰入れてみました。

やってみたら(まだまだだけど)意外と簡単にできたので、勉強方法を紹介~


1. どっといんすとーるでお勉強する


f:id:BTAD:20150927234527p:plain

※お勉強継続中です

3分以内の動画で1つずつわかりやすく説明してくれます。
自分にとってはどっといんすとーる様様で、本で読んでもさっぱりわからなかったのものが
すんなりと入ってきました。

初心者はここから入るのがベストだと思います。

自分もサクラエディタなどをDLして開発環境を作り、
同時進行で作成するといい感じ。 さらに、レッスン終了後に自分なりのアレンジを加えていくと楽しくなってきます。

メモ機能が素晴らしい! 自分がわかりやすいキーワードでメモを作成して、
いつでも見たいレッスンを見直せるようにするとよいと思います。
私はコレの他によく使うコードは小さな手帳に転記しておきました。
初心者の間は重宝します。

これだけだとすぐに忘れてしまったり、時々よくわからないレッスンがあると思います。
その時は……

2.Codeacademyで復習する


f:id:BTAD:20150927234604p:plain


日本語がないのが残念なのですが……。

たくさんのレッスンがあり、すべてミニクイズ形式です。
 
自分の手を動かしてコードを書いていかないと次に進めないので、
しっかりと頭に入ります。
また、自分がミスしやすいポイントを発見できるかも。

ゲーミフィケーションを取り入れているので、自分の進行状況がわかりやすく、
モチベーションが湧きます。遊びながら学べる。単純に、楽しい。

3.ジェネレーターを駆使

お勉強が済んだら実践編。

ひととおり学んだとは言ってもド素人なので、とくにデザイン系はジェネレーターなどのお助けサイトが神に見えます。

このあたりにお助けいただきました、ハイ:

他にもネットの中に住んでおわす神がたくさんいるのでぜひ検索してみてください。

4.試行錯誤を繰り返す

試行錯誤を繰り返しつつコツコツと作っていきますw

自分の場合はどっといんすとーるの動画を流しながら同時進行で作ったり。
本当にありがたい……。

作成の際には、Firefoxブラウザを使用して、アドオンのFirebug をいれておくべし。
何行目にミスがあるか発見してくれるので、
これがなかったら3倍以上の時間がかかる気がする。

5. 友達や家族に意見してもらう

ハッキリ言って、今の自分のスペックをはるかに超えた指摘が多いですが……
でも見てもらいます。見てもらうとバグ発見してもらえます。

6.アップロード

FC2に登録してそのまま指示にしたがって作成したファイルをアップロードするだけ。
わかっちゃいるけど載った時はなんか感慨深いっていうか。

7. 今後の課題

占いサイトですから、フォトショップの焼き込みを駆使して
もっと背後に天使やら星が飛び交ってるゴージャスな雰囲気にしたいと思います。
まずはPCのスペックを上げた方がいいかも。


かかった時間ですが、
どっといんすとーるのhtml.js.cssのレッスンをひととおり見終わった後は早くて、
文言や調べ物も含めて半月ほどで出来上がりました。

正直自分でももっと時間がかかると思っていたので上の製作者様がたにはひとえに感謝。
(占い方や文言については前職・本で仕入れた知識・ライタースクールなどで培ったものを応用)

そして出来上がったサイトがこちらです。

↓↓↓

http://digiac.web.fc2.com/yoho.html


まだまだ改良の余地がありますが…(汗)

プログラミングって、めちゃめちゃ楽しいことがよくわかった!