クリエイティブAoya.HataインカレのHPを制作して足りないと感じたことツイートシェアGoogle+はてブPocketはじめまして、4月からレッドインパルスでアルバイトをすることになった秦(はた)です。簡単に自己紹介をしますと、僕は関東のド田舎で大学生をしています。1年生の後期に立ち上げたプログラミング学習インカレの代表を務めています。この記事ではそのインカレのHPを1から作って初めて、得られた知見について書いていきます。次回予告どんなインカレなのかここで、少しインカレの説明をさせてもらいます。インカレ設立のきっかけインカレは僕が1年生の時に作りました。インカレの名前はPragin(プラグイン)です。きっかけは一緒にプログラミングを勉強するコミュニティが欲しかったからです。サークルではなくインカレなのかと言うと僕自身田舎に住んでいるのでとにかく情報量とイベントなどのチャンスなどが劇的に少ないため全国の学生を集めることでそれを補おうと考えたからです。サークルよりも閉鎖的にもなりずらいので自身が望めば大きなコミュニティを作ることが可能です。初めの活動内容はプロの方に講師としてついてもらい勉強会やビデオ、質疑応答によって勉強する予定でした。メンバーを集める際もプロに教われることを売りにして集めていました。僕が講師の方々とケンカ気味になったため講師の方たちとは連絡を取らなくなりました。活動内容がなくなってしまったので、当時の僕はとても焦りました。悩みに悩んだ末になんとか活動内容を確立できました。現在の活動内容は主にProgate(それぞれでUdemyなどのサービスを使用するのも良し)と不定期行う内外部の勉強会やもくもく会による学習。Praginが最も売りにしている活動が仕事を受託することに実践経験を得るという事です。これからの記事で書いていきますが実践して初めて得られる知識などが存在します。いった技術や知識を付けるために仕事を受託します。インカレと言う事で様々な分野に興味を持った仲間がいますのでもし自分で勉強していて分からないことなどがあった場合気軽に質問が出来ます。独学をしていて教えてくれる人や相談できる人がいない事がプログラミング学習を挫折する大きな原因でもあるのでとても良いグループだと自負しています。何人いるの?2018年4月でPraginは設立2年目に入り現在のメンバー数は27人です。当たり前ですがインカレなので色々な地域にメンバーがいます。Praginでは学習意欲、向上心のある学生なら誰でも歓迎しているので高校生もいます。興味のある方は是非連絡ください。twiterどんなHPを作ったのかインカレ設立した当時はペライチと言う、誰でも簡単にHPを作れるサイトを使っていました。インカレも設立して2年目になるのでそろそろ自分たちで作らねばと考え制作に乗り出しました。ところが、今までのProgateやUdemyによる勉強はむなしく、本当に基本的な事しかできませんでした。僕のデザインしたインカレのHPの機能は次の通りです。レスポンシブデザインヘッダーの追尾ヘッダーの透過メニューのアニメーションハンバーガータブお問い合わせフォームフォームの誤り検出とまぁ、よくあるサイトの機能です。これらの実装が予想以上に難しかったのです。Pragin)出来たこと、出来なかったことまず、結果を言いますとお問い合わせフォーム以外はなんとか実装出来ました。サイトを見てもらえれば分かる通りお問い合わせフォームが思っていたのとは違う形になりました。本当は入力したデータをサーバーに直接送る形にしたかったのですが、サーバーをいじれるだけの能力がなかったため、メールアプリを開かせる形になりました。機能の詳しい内容お問い合わせフォームお問い合わせフォームはjQueryによって正しく入力されているかを判定する機能が付いています。判定の内容は次の通りです。文が理解できているかが重要でした。それぞれの条件を漏れなく指定していきます。機能の最終確認はとても重要です。様々なパターンを考え実行してみてしっかりとエラーが出るかを確認します。この作業は一人では漏れが出てしまう可能性があるため、二人以上で行う事をお勧めします。参考にしたサイトの一つはこちらです。使った参考書はJavaScript逆引きレシピです。jQuery対応メニューのリンク次に、メニューの同ページでのリンクがどのように機能しているかについてです。はじめ実装する際は戸惑いましたが、思ったより簡単なものでした。href=”URL”>文字</a>を使用すると思います。変えるだけで同ページで飛ぶことができます。タグに飛ぶようになっています。今回は自分のインカレの紹介とお問い合わせフォームについて書きましたが、次の記事ではHP制作によって得られた技術面も含め知見について更に細かく説明したいと思います。最後まで読んでいただきありがとうございます。v4を使って静的ページでもルーティングするRECOMMENDこちらの記事も人気です。【TODOアプリ作成】Flutter・Firebaseでゼロからアプリをつくる。【TODOアプリ作成】Flutter・Firebaseでゼロからアプリをつくる。