2018.04.28 クリエイティブ

インカレのHPを制作して足りないと感じたこと

はじめまして、4月からレッドインパルスでアルバイトをすることになった秦（はた）です。簡単に自己紹介をしますと、僕は関東のド田舎で大学生をしています。また、1年生の後期に立ち上げたプログラミング学習インカレの代表を務めています。

この記事ではそのインカレのHPを1から作って初めて、得られた知見について書いていきます。

どんなインカレなのか

ここで、少しインカレの説明をさせてもらいます。

インカレ設立のきっかけ

インカレは僕が1年生の時に作りました。インカレの名前はPragin（プラグイン）です。きっかけは一緒にプログラミングを勉強するコミュニティが欲しかったからです。また、なぜサークルではなくインカレなのかと言うと僕自身田舎に住んでいるのでとにかく情報量とイベントなどのチャンスなどが劇的に少ないため全国の学生を集めることでそれを補おうと考えたからです。更に、サークルよりも閉鎖的にもなりずらいので自身が望めば大きなコミュニティを作ることが可能です。

 

活動内容

初めの活動内容はプロの方に講師としてついてもらい勉強会やビデオ、質疑応答によって勉強する予定でした。メンバーを集める際もプロに教われることを売りにして集めていました。しかし、僕が講師の方々とケンカ気味になったため講師の方たちとは連絡を取らなくなりました。活動内容がなくなってしまったので、当時の僕はとても焦りました。悩みに悩んだ末になんとか活動内容を確立できました。

現在の活動内容は主にProgate（それぞれでUdemyなどのサービスを使用するのも良し）と不定期行う内外部の勉強会やもくもく会による学習。そして、Praginが最も売りにしている活動が仕事を受託することに実践経験を得るという事です。これからの記事で書いていきますが実践して初めて得られる知識などが存在します。そういった技術や知識を付けるために仕事を受託します。

また、インカレと言う事で様々な分野に興味を持った仲間がいますのでもし自分で勉強していて分からないことなどがあった場合気軽に質問が出来ます。独学をしていて教えてくれる人や相談できる人がいない事がプログラミング学習を挫折する大きな原因でもあるのでとても良いグループだと自負しています。

 

何人いるの？

2018年4月でPraginは設立2年目に入り現在のメンバー数は27人です。そして、当たり前ですがインカレなので色々な地域にメンバーがいます。また、Praginでは学習意欲、向上心のある学生なら誰でも歓迎しているので高校生もいます。興味のある方は是非連絡ください。twiter

 

どんなHPを作ったのか

インカレ設立した当時はペライチと言う、誰でも簡単にHPを作れるサイトを使っていました。

しかし、インカレも設立して2年目になるのでそろそろ自分たちで作らねばと考え制作に乗り出しました。ところが、今までのProgateやUdemyによる勉強はむなしく、本当に基本的な事しかできませんでした。

僕のデザインしたインカレのHPの機能は次の通りです。

  • レスポンシブデザイン
  • ヘッダーの追尾
  • ヘッダーの透過
  • メニューのアニメーション
  • ハンバーガータブ
  • お問い合わせフォーム
  • フォームの誤り検出

とまぁ、よくあるサイトの機能です。しかし、これらの実装が予想以上に難しかったのです。

（実際のHP： Pragin）

出来たこと、出来なかったこと

まず、結果を言いますとお問い合わせフォーム以外はなんとか実装出来ました。

サイトを見てもらえれば分かる通りお問い合わせフォームが思っていたのとは違う形になりました。

本当は入力したデータをサーバーに直接送る形にしたかったのですが、サーバーをいじれるだけの能力がなかったため、メールアプリを開かせる形になりました。

 

機能の詳しい内容

お問い合わせフォーム

お問い合わせフォームはjQueryによって正しく入力されているかを判定する機能が付いています。判定の内容は次の通りです。

  • 記入漏れが無いか
  • メール記入欄にメールアドレス以外が記入されていないか
  • 文字制限をオーバーしていないか
  • HTMLなどが記入されていないか

これらを実装する際には基本的なJSの文法、特に if 文が理解できているかが重要でした。それぞれの条件を漏れなく指定していきます。

そして、機能の最終確認はとても重要です。様々なパターンを考え実行してみてしっかりとエラーが出るかを確認します。この作業は一人では漏れが出てしまう可能性があるため、二人以上で行う事をお勧めします。

参考にしたサイトの一つはこちらです。また、使った参考書はJavaScript逆引きレシピです。

JavaScript逆引きレシピ jQuery対応

メニューのリンク

次に、メニューの同ページでのリンクがどのように機能しているかについてです。はじめ実装する際は戸惑いましたが、思ったより簡単なものでした。

基本的に文字にリンクを追加する際は<a href=”URL”>文字</a>を使用すると思います。それと同様にして、飛びたいリンク先に id を付けておきURL部分を id に変えるだけで同ページで飛ぶことができます。以下の例では id2 の div タグに飛ぶようになっています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
     <div id="1">
          <a href="#id">id2のdivタグに飛ぶ</a>
     </div>

     <div id="2">
           <p>このdivタグがリンク先</p>
     </div>
</body>
</html>

 

次回予告

今回は自分のインカレの紹介とお問い合わせフォームについて書きましたが、次の記事ではHP制作によって得られた技術面も含め知見について更に細かく説明したいと思います。

 

最後まで読んでいただきありがとうございます。

次回もお願いします。

 

 

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

レッドインパルス リーダー

NEW POSTこのライターの最新記事