長文駄文注意
こんにちは、初投稿の荻窪あいです。
ネッ友さんがWebチャットアプリを作ってました。
純粋に羨ましくなりました。
…作ってみようと思いました。
でも、そっち方面はまったくの初心者です。
今のところHTMLとCSSしか習得してないので、新しいプログラミング言語を習得しなければいけません。
今回の内容
- チャットアプリを制作するための言語を調べる
- 環境インストール
- Webサイトの用意
レポート
プログラミング言語について
友達に教えてもらったところ、
初心者ならばSocket.ioがいいよ。
とのことで、Socket.ioというサービスを用いて開発を進めることにした。
ところが説明文が全て英語である。残念ながら私は英語を理解できないので、使い慣れたWebのGitHubからすることにした。
開発環境インストール
GitHub のREADMEに、replitというサイトから実行できるとあったので、アカウントを作成→実行した。
もう一つのサイトは何回試しても上手くいきそうになかったので、諦めた。
replitの使い心地は、glitchに似ている。
glitchの上位互換と言いたいところだが、もともとWebサイト制作をメインでしていた私にとってはglitchの方がWebサイトのURL指定が簡単なので好ましい。
今回は、チャットアプリ本体をreplit、アプリへの誘導や利用規約等を記載するWebサイトをGitHubで制作することにした。
プログラミングは基本学校配布のGIGA端末で行なっているため、無闇なアプリのインストールは避けたいところである。
Webサイトの用意
GitHubにてWebサイトを用意する。今回は、Orgアカウントを作成し新しくURLを用意した。
HTML、CSSを1から書くのは久しぶりである。
復習も兼ねて、自分のHPを数ヶ月ぶりに更新した。
ロゴ作成
ロゴはアプリの顔である。(と信じている)
今回は使い慣れたScratchのベクターエディタを使用し、正方形のロゴを作成する。
ロゴ作成で重要なのは、小さくても大きくても判別しやすくすることだと父に教えてもらった。
黒と白の2色に揃え、サービス名を入れる。新しくフォントを追加した。全体的に円い印象だ。
作成したものをスクリーンショットし、正方形にトリミングした。
トップページ
題名を大きく表示するようCSSを設定する。
先ほどで作成したロゴも表示させる。ファビコンも設定した。
説明文や利用規約(次の項を参照)などを用意し、とりあえず完成だ。CSSにはもう少し改善の余地がありそうなので、余裕があれば再検討したい。
利用規約
チャットアプリのようなコミュニティサイトで必要なルールとは何だろうか。他のチャットアプリの利用規約等も参考にしながら、書いていく。こちらもまだまだ改善点がありそうなので、詳しい友達に教えてもらいながら書いていきたい。
今回の復習と次回の予定
- [ ]チャットアプリ本体のCSS整備
できれば、モバイル表示に対応させたい。 - [ ]ニックネーム機能の設定
利用規約を書いてたら、絶対必要だと思った。 - [ ]IPアドレスを利用したユーザーの判定
上に同じ。
全部できるかは分からないので、特にCSS整備を優先して進めたい。
感想
大変だった。この文章を書くのが。長文は苦手なんですよね。これを書くだけで1時間過ぎました。今回の作業と同じくらいの時間が掛かってますねw
次回予定で、Node.jsを勉強した方が良さそうなので勉強してきます。
関係のないこと
今日(12/9)、考査が終わりました。考査が終わったら楽しい冬が待っています。ディズニーに行って、クリスマスプレゼントもらって、北海道に帰って、お年玉もらって…宿題？ﾅﾆｲｯﾃﾙｶﾜｶﾘﾏｾﾝﾈʕʘ‿ʘʔ
来年のJOIGに行かされそうです。誰かどうにかしてください。
それでは、この辺で。閲覧ありがとうございました。