【jQueryのおみくじ講座付き】年賀サイト制作もくもく会

年賀サイト制作もくもく会とは

みなさんは年賀状を書いていますか？ 私は社会人になってから書いていません(キッパリ)

でもお正月の雰囲気になって、年賀状届いたとか年賀メール届いたとか聞くといいなって思っちゃうんですよね〜。
だったら、年賀サイト、作りましょう！！

でもただ作るだけじゃ面白くないですよね。 WEBサイトの特性を生かしてアニメーションをつけたり機能をつけたりして、訪問してきてくれた人を楽しませたい！
ってことでjQueryでおみくじ機能も実装しちゃいましょう！

jQueryがわからなくても大丈夫！ 私が教えます！！

デザインは事前に用意してきてください！
jQuery以外の部分を先に制作してきてもOKです！おみくじ作ったら公開するだけですね！

できたWEBサイトはポートフォリオに載せるなり、公開して元旦にみんなにURL送るなり、お好きにしちゃいましょう！
ご希望の方はXserverとFTPクライアント(後述)をご用意いただければ公開まで教えますのでご準備ください。

日時・会場

日時

12/27(金) 19:00 〜 22:00

会場

東京都渋谷区道玄坂2-10-12 新大宗ビル3号館9F
9階に着きましたらTwitterなどでご連絡ください！
※日本フードデリバリー株式会社様のオフィスをお借りします！

対象者

• jQueryをまだうまく使いこなせない方
• WEBサイトを公開してみたい方

使用ツール・アプリケーション

• VScode(エディタ)
• Google Chrome(ブラウザ)
• Figma(デザインツール) 各自年賀サイトのデザインをご用意ください。
• Xserver X10プラン(レンタルサーバ)※公開までレクチャーをご希望の方
  下記プラン表です。10日間は無料なので申し込んでおくだけでも可能です。
  XserverX10プラン
• 独自ドメイン(ドメイン)※オリジナルのドメインで公開したい方
  Xserverの契約でドメインが一つ無料でもらえるので一緒に取得することをおすすめします。
• CyberDuck【Mac用】(FTPクライアント)※公開までレクチャーをご希望の方
  こちらからダウンロードしてインストールしてください
  https://cyberduck.io/index.html
• WinSCP【Windows用】(FTPクライアント)※公開までレクチャーをご希望の方
  こちらからダウンロードしてインストールしてください
  WinSCP - 窓の杜
• しょうみゆのお道具箱

※レンタルサーバ・FTPクライアントは別のものでも大丈夫ですが、サポートできかねる場合もありますのでご了承ください。

事前準備

年賀サイトのデザインを事前にご用意いただけると制作、公開がスムーズです。
できれば事前にご準備をお願いします。

おみくじ機能はボタンを一つ用意してボタンの下などに結果を出力するような内容を想定していますので、 ボタンと出力スペースはデザインとしてご用意ください。

その他のデザインはご自由です。

また、HTML/CSSなどの作業ファイルも事前に制作し、当日はjQueryのみの実装というところまでやってきていただいても大丈夫です！

内容

jQueryを使用しておみくじをつくろう

• ランダム関数を使用して大吉〜大凶(お好みで)を好きな確率で出力させる機能を実装します
• codepenで動きを確認しながら作成していきます(codepenのアカウントをご用意ください)

もくもくと制作しよう

• jQueryの実装が完了して時間が余ったら各自残りのHTMLやCSSを制作して仕上げましょう

サーバアップロード・公開方法を知ろう

• 実際に公開する方法をレクチャーします
• XserverとFTPクライアントをご準備していただいた方には実際にアップロードしてみるまでサポートします

持ち物

• PC
• お菓子(お好みで)
• 元気な身体

その他

• WiFiはこちらで準備しております。
• 不明な点がある場合はTwitterのDMでご連絡ください。