しがない情報系専門学生の発信集

情報系4年目の学生がやりたいことに対して悪戦苦闘するブログです。Web系で戦いたい。

開設当時の自己紹介

初めてのご挨拶

はじめましてms3nd3rと申します。（エムセンダーって読んでください）今年から情報系の学生としてやっていってます。今はサーバサイドとか学んでシステム構築したいかなとか思ったり。記事名は"当時"としておけばいつでも振り返られるなとか思って付けました。悪気はないです。

一問一答

なんで開設したんですか？

学習状況をアウトプットすることで相互的にも自分としても身になると思ったからです。あとは"こんな風に頑張ってたなー"とか思い出すのって割と面白かったりするんです。だから解説しました。

何を書くんですか？

基本的には情報系全般で行ったことで"出力したいなー"って思ったりとりあえず書いて自尊心を満たせたりするものを書きます。本当ならヲタクの本性表して推し語りで一万文字書きたいですけどかなり篩に掛ける行為なのでやめときます。

いつ頃書くんですか？

書きたいと思った時です。連日連夜で投稿するかもですしボロボロの味噌っかすだったり萎えたら書きません。ノリノリで学習が進むのを楽しみにしてください。

最後に一言

趣味と仕事両立してオモロく生きていきたいですね。よろしくお願いします。

LINE BotでLINE謎を作成しました

はじめに

こんにちは。ms3nd3rと申します。 題名の通り先日学内のイベントでLINE Botを利用しLINE謎を作成しました。
その制作過程についてまとめていきたいと思います。

目次

まとめ

  • LINE Botを活用して非認証公式アカウントを作りました
  • 情報系の学生向けに謎解きの問題を作りました
  • GAS(Google App Script)を使いJavaScriptのコードを書くことでどんな答えにも対応する自動返信の仕組みができました
  • 学内イベントで配布したところ72人に友達追加(≒謎解きをプレイ)してもらいました
  • アンケートに回答していただいた8割以上の人に"とても楽しかった"と評価をいただきました

参考にしたサイト

【LINE謎】LINEで遊べる謎解きの作り方と開発方法まとめ | みんたく
LINE謎は謎解き界隈においてスタンダードになっているところがありますが、改めて細やかに解説をしていただいているこちらのサイトを参考にしました。 コードに関してもこの方の記法を参考にしております。是非訪れてみてください。

作り方

制作手順-1 "謎を作成する"

謎解きの環境を作るのですから謎を作ることは欠かせません。
大謎から情報系の学生向けの小謎を作り、合計7問分の謎を作成するに至りました。
ただし技術とは別ベクトルの内容になるので、気になる方は本稿下部の謎についてを参照ください。

制作手順-2 "LINE Developersで公式アカウント開設"

いざ謎が用意できたら公式アカウントを開設します。

LINEDevホームページ

ここからLINE Developersにアクセスし、
ログイン→プロバイダ作成→新規チャネル作成→Messaging APIと選択します。 任意のチャネル名やアイコン画像を設定し、下部の"作成"ボタンを押すことで新しくアカウントを作ることができます。
※元々LINE Botの用途として企業の宣伝を兼ねている都合上、利用する業種の入力を求められますが、なるべく自分の用途に近いものを選んでおけば問題はないと思われます。個人開発にも広く用いられているため、気にせず作成してください。

制作手順-3 "GASの環境を作る"

続いてコードを書くための準備を行います。 GAS(Google App Script)の環境を利用することで低コストかつシンプルにWebアプリを建てられるため、Botを扱う際にはよくお世話になっています。

  1. 適当なスプレッドシートを作成
  2. 上部"拡張機能"タブよりApps Scriptを選択してください。
    ※ここは私が参考にした記事と位置が変わっています！注意して探してください
  3. 遷移先で.gsファイルを作成できることを確認
    GASの位置はここ

制作手順-4 "LINE Developersでチャネルアクセストークンを取得"

続いてチャネルアクセストークンを取得します。これが無いと処理がつながりません。

LINE Developersで提供するチャネルでは、認証手段としてチャネルアクセストークンを利用します。LINE Developersに正しいチャネルアクセストークンを送信してきた相手は、そのチャネルの利用権限を持つ本人であると判断される仕組みです。- 公式ドキュメントから引用 developers.line.biz

LINE DevelopersのMessaging API設定の最下部にあるチャネルアクセストークンの発行をクリックし、コピーしておきましょう。

チャネルアクセストークンは長期と書かれているここから発行

!!ここで取得できたトークンの文字列は現実世界の鍵と思ってください、うっかり漏らさないよう気をつけましょう!!

制作手順-5 "GASでコーディング"

先ほど取得したチャネルアクセストークンを書き込み、 解答の結果を処理するためのコードを書いていきます。

設定周り
// チャネルアクセストークンを設定
var channel_access_token = "手順4で手に入れたチャネルアクセストークンを入れてね";
 
// ユーザからのリクエスト判定(友達追加またはメッセージ)
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if (event.type == "message") {
      sendMessage(event);
    }
    if (event.type == "follow") {
      sendFollowMessage(event);
    }
  });
}

function sendFollowMessage(e) {
  var followMessage = setFollowMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": followMessage
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}
友だち追加のメッセージの処理
// 友だち追加のメッセージ
function setFollowMessage(e) {
  var message = [{
    "type": "text",
    "text": "追加感謝のメッセージ、ここで問題を出してもOK"
  }
  ];
  return (message)
}
返答メッセージにまつわる処理
function sendMessage(e) {
  var message = setMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": message
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

// メッセージが送られてきた際に返す返信の条件分岐
function setMessage(e) {
  switch (e.message.text) {
    case "正しい答え":
      var message = [
        {
          "type": "text",
          "text": "正解発表をしたり祝福のメッセージを入れてくだされば"
        },
        {
          "type":"image",
          "originalContentUrl":"問題に使う画像元のURL",
          "previewImageUrl":"プレビューに使う画像元のURL@1MBまで"
        }
      ];
      return(message)
      break;

// 送られてきたメッセージが答えと違う場合やtypoがありcase文と一致しない場合
  default:
    var message = [
      {
        "type": "text",
        "text": "エラーだよ！答えか入力した文章の形式が間違っている可能性があるねぇ。"
      }
    ];
    return(message)
    break;
  }

以上がテンプレートです。
流れとして、友だち追加→友だち追加に対してのメッセージ(ここで出題)→答えが送信される→正解ならば解説と次の問題の画像を送信→答えが送信…
となります。(太字がBot側の動き)

完了したらデプロイを行います。
"デプロイ"→"新しいデプロイ"で設定画面に移動し、
説明:任意の説明文(無くても構いません)
次のユーザとして実行:自分
アクセスできるユーザ:全員
この設定にした上で"デプロイ"ボタンを押すと処理が保存されます。 この際ですが、ウェブアプリという領域に現れたURLをコピーしてください。手順6にて利用するので、とりあえずクリップボードに保存してから次の手順に移りましょう。

URLをコピーして次の手順へ

制作手順-6 "Webhookで処理をつなげる"

手順5でウェブアプリのURLはコピーしてこれましたか？ ここからLINEBotと処理のやりとりができるようにします。

  1. LINE DevelopersのMessaging API設定のWebhook URLに遷移する
  2. "編集"ボタンからウェブアプリURLをペースト
  3. "検証"ボタンで"成功"と出れば完了

Webhookの利用をオンにすることも忘れずに

ここまでくれば動きとしてはOKです。
自分のアカウントでテストプレイして改修を重ね、正常に動いた段階で公開へ移りましょう。

制作手順-7 "アカウントを公開"

  1. LINE Official Account Managerにアクセスし、先ほど作成したBotのページへ遷移します。
  2. 左端のメニューバーを開き,"友だちを増やす"→"友だち追加ガイド"→"友だち追加QRコードを作成"をクリック
  3. このBotを友だち追加できるQRコードが表示されるので、ダウンロードするなりなんなりで好きな場所へ配布

以上で、自分で作成したLINE謎を誰かにプレイしてもらうことが可能になります。

トラブルシューティング

  • 友達追加時、メッセージ送信時に意図しないメッセージが送られてしまう
    • A."LINE公式アカウント機能"から"応答メッセージ","あいさつメッセージ"を無効におきましょう
  • 画像が表示されない
    • A.ドキュメントやコードの凡例のように、画像の要素をきちんと満たしましょう

謎について

本線ではありませんが、せっかくなので謎を作成する際の環境も紹介します。

利用するツール

あると便利なもの

  • 謎解き知識
  • 五十音表、アルファベット表
  • Notion,WorkFlowyなど色々な端末で同期できるメモ環境

作り方

  1. どんな謎が作りたいかを考えます(情報系の学生向け,最後に答えがつながるどんでん返しなど)
  2. 謎の構成をメモできる環境に書き出します
  3. 画像が必要な謎があればいらすとやをはじめとした画像をインターネットや自力で収集
  4. Photoshop,Illustratorのようなソフトを活かし画像制作
  5. 完成したらpngに書き出し

こんな感じの謎を作っていました

フィードバック、反省点

  • ８割以上の方に最高評価で楽しんでいただけました。
  • バグや謎の仕様に質問を受けることが多かったので、スムーズに解ける環境を作っていきたいです。

今後の展望

  • 内輪で終わらず、パブリックに公開してよりたくさんの人に謎を解いてもらいたい。
  • ドキュメントを読んでリッチメッセージを使いこなし、もっと驚いてもらえるような謎を作りたい。
  • 外部APIや日時を生かした仕掛けを書き、謎の幅を広げたい。
  • 頒布しやすい環境を見つけ、よりたくさんの人と楽しんでいきたい。

あいさつ

先駆者としてブログを書いていただいた方、謎をプレイしていただいた学生の方、そしてこのブログを閲覧してくださった方にこの場を借りてお礼申し上げます。ありがとうございました。

GitHub pagesでホームページを完成させたお話。

遂に完成しました。

githubの存在を知り、プロフィールや諸々をまとめたホームページを作ろうと着手してからはや4，5か月。
遂に完成しました。(大切なことなので二回言いました)
もうリンクも掲載しちゃいます。[ここ]からぜひ。

何を盛り込んだか

このホームページに入ると、古の個人サイトのような景色が広がります。(ただの趣味)
それに加えて自己紹介（日本語、英語版）もついてます。
さらにJavaScriptで作った自作ページの一覧もついてます。めちゃくちゃ豪華。

それにしてもこの記述量にしては制作期間が長くないですか？

ごめんなさい。資格試験が全部悪いんです。← もろ勉強でアルゴリズムを頭に叩き込みまくったら更新モチベ下がっちゃいました。
これからは自分のやりたいことに向かいながら時間を作れるのでいろいろ勉強したり更新できるかなと思います。

最後に

またRailsに注力したりしたら記事書けると思うので頑張ります。
まずはひぐらしのなく頃に業視聴してkanon視聴して氷菓視聴してからですね←

ITパスポート試験に多分合格したお話。

（3か月以上前に書いた下書きを放置していたので改めて投下します、ごめんなさい）

タイトルの通りです。つい先週にITパスポート試験を受検しまして、 ストラテジ系6割、マネジメント系8割、テクノロジ系9割の得点をとったので 多分合格しました。やったぜ。
いつもみたいにやりかけで終わるとほぼタイトル詐欺ですし 今回は合格までにどのような道筋を辿ったかをお伝えしてこれから受検する方の一助になればいいなと思って書いています。

それで、何をすりゃあいいんですか

自分がやったことですが、

  • パソコンをハード、ソフトともに弄り倒す
  • J検3級のテキストを読む
  • ITパスポートの講座を行っている動画を見る
  • 過去問めちゃんこ解く

大体こんな生活を3か月から4か月程度していました。
ただ、全力で心血注ぎ続けた4か月でなくヲタ活だったり趣味にどっぷりハマった上やってきたので上手くやりくりできる方は1か月とかでも難なくいけるような気がします。（[線を引く]説得力がないとか言わない）

どのように取り組んだのか

パソコンをハード、ソフトともに弄り倒す

これは個人的に以前から興味があったというところで若干アドバンテージがあるような気がしますが、とにかくパソコンに触れてください。
そしてキーボード、マウス、ディスプレイといった周辺機器、自作パソコンの組み立て動画とか観ると必ず出てくるマザーボード、CPU、GPU、その他諸々のハードウェア、 便利系からゲームといったソフトウェア、そのどれかに興味があればテクノロジ系は勉強に抵抗がいらないと思います。

受検という意識をせずともハマると勝手に名称は覚えますし、今後の勉強が実生活と結びついてより楽しくなりますよ。

J検3級のテキストを読む

テクノロジ系の勉強をするならそこそこ役立ちます。

  • 五大装置を説明してくれている
  • 通信規格など略語の説明多数
  • 演習問題もあり

割とすんなり頭に入ってくるんでお勧めしたい。

ITパスポート試験の講座を行っている動画を見る

ここから本格的にITパスポート試験の勉強開始。
この動画が個人的にとてもおすすめ。
さとうささらボイスが嫌じゃなければしっかり解説してくれるしとてもいい。
([線を引く]雀魂で半荘打ちながらでも頭に用語が入ってくるくらいわかりやすいですよ) 一周するだけでもいいしわからない部門はもう一回聞くことが出来ることが動画の利点。 それを活かして記憶の定着を図った。

過去問めちゃんこ解く

いろいろ言いましたけど結局これです。御託並べるよりも解いてください。
3文字略語がわからない→とりあえず解いて躓いてから知ってください。
公式が頭に入らない→とりあえず解いてください。
こんなことをやっていればいつしかわからない部分が無くなってきます。
以前はわからなかった要件定義の話とかが「あぁ、アレか」とか思えるようになってきたら合格は目前。
最初と比べて飛躍的に正答率が向上していることにきっと達成感を感じられるようになります。

…こんな塩梅で受験すればなんとかなりました。この記録が役に立つかはわかりませんが、「こういうやつもおんねんな」 程度に思ってください。とにかく、こちらのページを閲覧してくださった方の合格をお祈りします(*˘人˘*)

pythonを学び始めたお話。

どうも。
低迷したモチベーションが戻ってきたんで書きます。

まずはタイトルを詳しく説明。

FEの勉強やらで忙しいなか、STOCKリーグとやらに参加。早い話が仮想投資コンテストなんですけどもそこに参加した先人が機械学習の戦法をとったらしい。そこでpythonが使われたそうな。

記述が簡潔でサーバサイドから機械学習までの汎用性もあり前々から気にはなっていたので早速齧っていくことに。

どんな方法で勉強していったんすか

とりあえずprogateの無料で受講できる部分までをまとめて勉強。
簡単な出力や計算、if,elif,elseとか諸々を知ることが出来た。

それじゃ実践してみませんか？

Atcoderにおいてもpython3はマイナーながら使われると聞いて、パッと登録してチュートリアルに臨んだもののまだまだ基礎力が足りず。控えめに言って死。

AIZU_ONLINE_JUDGEの方で初歩からやっていくことに。とりあえず右も左もわかっていないんでぼちぼち進めます。

最後に

本当に初めの一歩だけなのでこれから発展させていきたい。この記事クソ短いけど書けることが増えたら次第に長くなると思います。
ではまた。

GitHubでホームページを作りたいお話。

CAUTION:このページはただの備忘録です、How To系ではないので悪しからず…

情報系の基礎から学びだして2か月弱、周りの人に触発されて自分もホームページ的な何かを作りたくなってきました。なので先人のようにGitHub.ioとやらを用いて作ることに。

それで何をしたんすか

最初にGitHubを用いて超絶簡素なページを作成。
（本当に最初の最初にはホームページだけを公開するだけのサービスだと勘違いしていた。おかげでapacheで試行錯誤したりレンタルサーバーのことまで調べだしたのは内緒）
覚えたてのHTMLとCSSで20行にも満たないかぁいいHTMLファイルの完成。
　 リポジトリ名をms3nd3r.github.ioとかにしてSettingからドメインとアップロード確認をして漸く1ページ表示。
やっとの思いで書いたコードで何が表示できたかというと

    　　
  • でっかい赤文字でテストページのアピール 　　
  • これまたでっかい赤文字で写真を見てくれとアピール 　　
  • サイズ指定ミスってクソデカ熱海の写真 　　

これだけ。
若干情けなくなりながらもGitHubにファイルを投稿したりリポジトリの設定を弄ることが出来て初めの第一歩を踏み出せたことに若干の高揚感を覚えつつ次のステップへ進むことに。

もうちょっと頑張ってみました

次はMaterial Design Liteのテンプレートを用いて綺麗なガワのページを作ることに。
ソースコードをダウンロードして中身を読んでビックリ。
クソほど整然としとるやんけ…
100行以上あってもCSSを鮮やかに弄ってあって非常にわかりやすい。最初はそこから弄り初めて軽く書き換えることに。
最初は名前や趣味から書き込む。イキって英語を書き込みつつ最低限の体裁を整えて完成。

ここで一つ問題が

Google社製のマテリアルデザイン、多分OSSではあるんだろうけど権利の説明を把握しきってない。

というわけで制作したページはとりあえず撤回して自力で何とかしようと思います。 それが完成した時に改めて報告出来れば…