Kadai Info Tech Blog

KADAI INFOのテックブログです

【第2弾】KADAI INFOアップデート情報【リリースノート】

はじめに

どうも、「KADAI INFO」でエンジニアしている中原です!
今回は鹿児島大学生向けの神アプリ「KADAI INFO」を神のみぞ知るレベルにアップデートしたので情報公開するぜ!

ちなみに、以前のアプリ情報についてはこちらからどうぞ!

記事閲覧

こちらの機能では、再・追加読み込みする際に読み込んでることが見た目的にも分かるようにしました!

「コイツ何言ってんだ?」そう思いましたね。百聞は一見に如かず。具体的な画像を見せるぜ!

f:id:kadaiinfo-tech:20200421073037p:plainf:id:kadaiinfo-tech:20200421073121p:plain

上の画像の赤い線で囲んである部分。いろんなアプリでよく見るこれ!

これ勝手についてくるんじゃなくて、ちゃんと実装しないとできないやつなんです!!

とりあえず、これを実装したことでエラーが出たときも画面更新できるし、追加で記事読み込んでるときも読み込んでることが分かるので気持ち的に楽に感じれるようになったかと思います!

時間割

f:id:kadaiinfo-tech:20200421074142p:plainf:id:kadaiinfo-tech:20200421074300p:plain

時間割機能がついに実装されましたー!!!

こんなかんじで「講義名」と「場所」をすぐに確認できるシンプルなものしてみました!

コマをタップすると右の画像のように詳細を確認することができます!

f:id:kadaiinfo-tech:20200421074330p:plainf:id:kadaiinfo-tech:20200421075000p:plain

講義を登録する方法は簡単で、「登録したいコマ部分をタップ」→「編集をタップ」で素早く編集画面にうつることができます。

登録する項目は「講義名」「教室」「教員」です。それと・・・

自分の好きな色も選べるんだなこれが!現在登録できる色は右の画像の通り!!是非自分好みの時間割にカスタマイズしてみてください!

サークル一覧

f:id:kadaiinfo-tech:20200421075726p:plain

こちらも新機能!!鹿児島大学で活動しているサークルをすぐに確認できる機能なんですが、画像のように好きなジャンルから探すことができます!

さっそく気になるジャンルをタップしてみるぜ!

f:id:kadaiinfo-tech:20200421080038p:plain

さあ、自分はやはり開発が好きなので「メディア・情報」を選んでみました!

ふむふむ、思ったより多いな。

今書いてるこの記事のために、この中から1つ選ばないといけないのか・・・難しいけど頑張って絞るぜ!

f:id:kadaiinfo-tech:20200421080342p:plain

おっと!これはこれは偶然にも「KADAI INFO」!

鹿児島大学にはこんなにもおもしろそうなことをしている神サークルがあったのか!

いやー、この神アプリのおかげで神サークルも探すことができちゃいましたわ。あっぱれあっぱれ!

学生証リーダー

f:id:kadaiinfo-tech:20200421080907p:plain

さあさあ、この機能。鹿児島大学の学生証についているプリペイド残高を読み取ることができるんです!!

よくあるこのようなアプリは「suica」「nanaco」といった有名なやつは読み取れるんですが、学生証のプリペイド残高には対応していません!!

し・か・し

KADAI INFOアプリでは画像のように自分の学生証にかざすと「残高」「利用履歴」を素早く確認することができます!

おっと、分かりやすいように自分の学生証を読み込んだ画面をのせてしまったせいで、私が億万長者であることがバレてしまった!

最後に

第2弾のくせにアップデート情報盛りだくさんですみません!
今後もKADAI INFOアプリは進化していきますので、どうぞよろしくお願いします! では!

【PV数を回復】便利なようで苦しめられたAMP

どうもです! KADAI INFO 代表のみっちゃん(満園大輔)(@mitsuzono_kadai)です。

鹿児島大学大学院の1年生で情報系を学んでおります。

現在、僕はKADAI INFOの代表をしておりますが、 昨年は副代表として、そしてエンジニアを兼務しておりました。 今は代表となり、営業に行ったり、動画撮影をしたり、、、と忙しい毎日を過ごしております。 そんな中でも、足りないところには入って開発を続けています。

今回は最近、KADAI INFOの中で1番の問題となっていた PV数の低下 をTechの力で原因解明と解決したお話をしたいと思います。


AMPとは

この問題を改善する上でまずは、AMPを知っておかなくてはなりません。

AMP(Accelerated Mobile Pages)とは、モバイルページを高速に表示させるための手法のことです。

このAMPはGoogleTwitterが協同で開発したものであり、「サイトの読み込みに時間がかからない」ために開発されています。これはWebページの表示速度がユーザのサイトへの直帰率に起因するというものからです。そのため、文字や簡単な画像だけを拾って再構築したWebページを表示するため、必要な情報が素早く見れるというわけです。



高速表示化の仕組み

通常は、Googleなどの検索結果から出てきたリンクをクリックすると、Webサーバ上にある情報を読み込んでから表示します。そのため、表示に時間がかかります。

ですが、AMP対応のWebページだと、あらかじめGoogleTwitterのサーバにキャッシュする(Webページのデータを一時的に保存する)ことで、リンクをクリックしたときに、通常はサーバにデータを読みに行くところをあらかじめ用意しておいたキャッシュを表示させ、読み込み時間を大幅に削減しています。

f:id:kadaiinfo-tech:20200306020757p:plain

出典:AMPって何?仕組みを知って快適にページを閲覧しよう : ビジネスとIT活用に役立つ情報

メリットとデメリット

ここまで聞いていると、AMP最高じゃん!使わない手はないじゃん!と思うかもしれませんが、AMPの落とし穴もあるのです。

メリット

・高速にWebページを表示できる。

Googleの検索上位になりやすい。

Googleさんも公式にAMP対策した方が検索上位になりやすいよ〜とやんわり言っているので、確かなのでしょう。

デメリット

Google Adsenseが表示されない。

・Webページの形が崩れる。

・別URLになるためPV数のカウントがされない。

そうなんです!!!!! ここが1番の問題なんです。

私たちKADAI INFOの収入源の1つにGoogle Adsenseがあります。さらにTwitterからの閲覧者が多い中、AMP側のURLに行かれたら見られていないことと一緒!

最近、なんでかPV数少ないなぁ。少ないなぁと悩んでいたんですよ。

こいつのせいだったかと。。。 AMPは便利なようで私たちにとっては敵です。


これで解決

Twitterから個別でAMPを外す設定はできますが、こちらからお知らせしても全員が外すわけないですよね。

ならば、こっちから外しにいってやろうと、、、、 でもGoogle様とTwitter様が推奨するAMPをそう簡単に外すことはできない。

そうか! AMP表示させたと見せかけて、本来のURLにリダイレクトすることで解決すればいいのね。

つまり、AMPに飛ばされるURLはこんな感じhttps://kadai-info.com/2016/12/04/mochikoshouse/amp/?__twitter_impression=true 

URLの後ろにいらない/amp/?__twitter_impression=trueがくっついている。本来、アクセスしてほしいURLはhttps://kadai-info.com/2016/12/04/mochikoshouse こっちなんですね。

/amp/?が入るURLがある時は、そこから後ろを無くしたものに再アクセスするようにこちらが設定すればいい。 (*これをフィッシングなどに悪用したらダメですよ〜)

Wordpressのファイルには「.htaccess」というディレクトリごと一気に変更できる設定ファイルがあるので(*こういう緊急事態の時以外はあまり触らない方がいいです)そこにリダイレクトするための記述をします。

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)amp/?$ $1 [R=301,L]

こんだけ!便利ですよね〜。 /amp/?が付いているURLはそれ以降を省いたURLにリダイレクトさせましょうということです。

301というのは、「301リダイレクト」と言って、ホームページのお引っ越しとかそういう時によく前のURLにアクセスしたら、自動転送されますが、その転送手法ということです。

これにて、本来のアクセスしてほしいURLへとユーザを飛ばすことができたので、めでたし。めでたし。となります。

Google Analyticsに感知されるようになったのでPV数も安泰だし、Google Adsenseも表示されるようになったので安泰です。

みっちゃん代表がKADAI INFOの安全と平和を取り戻したお話でした。おしまい。

【参加報告】さくらじまハウス2020でLT登壇してきました【せりちゃんver.】

 

皆様、初めまして!

 

KADAI INFOエンジニア部唯一の女子メンバー、副エンジニア長せりちゃんことセリナ(@serina_ponpi)と申します。

 

2月6日-7日に鹿児島のエンジニアイベント“さくらじまハウス2020”が開催され、エンジニア部メンバーが参加してきました。

 

その中でも私セリナとがんがんさんの2人はLT登壇をしてきましたのでその様子をレポートしていきます。

 

 

さくらじまハウス2020とは?

 

さくらじまハウスは、最前線で活躍されている様々なエンジニアのセッションが聞けるITカンファレンスです。

 

こちらが公式サイトです↓

 

誰でも参加できるイベントで、エンジニアの方だけでなく学生の参加もできます。

 

INFOエンジニア部以外にも鹿児島大学の生徒が数名参加していました。

 

(がっつりテスト期間中だったのでみんなテストを避けてきていました)

 

今回は2年ぶりの開催で、100名近くの方が参加していました。

 

私は少し早めに会場入りして前から3列目に座ったためとても見やすかったです。

 

f:id:serinanana:20200218150944p:plain

 

全体としてはこんなにたくさんの方々がいらしゃっていました。

 

 

鹿児島県内のIT企業の方はもちろんのこと、東京からいらっしゃった方、フリーランスで働いている方など幅広いエンジニアの方が参加していました。

 

普段はなかなか会えないような現役エンジニアの話が直接聞ける、鹿児島では貴重なエンジニアイベントだったと思います。

 

将来エンジニアを目指す学生にとって、とても刺激のもらえるイベントであり、新しい技術に触れられるイベントとなりました。

 

 

各セッションのおはなし

 

さくらじまハウス2020は、「エンジニアとしての生き方」がテーマでした。 

 

時間ごとにセッションが分かれており、特定の分野で活躍されている方やさまざまな働き方を実践されているゲストとのパネルディスカッションがありました。

 

学生という立場からすればわからない話も多かったですが、メモをとりながら聞き、講義があった分野の話は比較的ついていけたものもありました。

 

私は2日目のみの参加でしたが、特に「レガシーコードへ立ち向かう」というセッションが印象に残りました。

 

「 レガシーコードとはなんぞや?レガシー=遺産?昔のコード?」と初耳状態で参加してぐぐってたんですが、必ずしも古いコードということではないようでした。

 

ぐぐってみるとこのように出てきました。

 

「レガシーコード」という言葉を「何年も前に誰かが作り、内容が複雑で何をしているのかよく分からず、まともな仕様書もないコード」いうコードを指すものとします。ー開発者のための実装系WebマガジンCodeZineより

    

 

古いことが多いのでしょうが、理解しづらい・変更しにくいコードまたはテストのないコードであり、”改善すべきコード”というように私は捉えました。

 

このセッションは、

の3人が登壇し、実際の現場で起こりうるレガシーコードへの向かい方のお話をしてくださいました。

 

実際の開発現場では、何十年も運用されていたり何十人も開発に関わっていたりすると“誰もわからないコード”というのが存在するようです。

 

大学ではそのような大規模な開発に関わることもないし、研究をまだ始めていない私は自分のコードや先生の示したコードについて考えるだけなので触れたことのない世界でした。

 

そのようなレガシコードはシステムの脆弱性となることから、にしむねあさんからはセキュリティ面での話がありました。

 

ちょうど「情報セキュリティ」講義を受けていたタイミングだったので現場の話が聞けたことは貴重の経験だったと思います。

 

本当はプロダクトごとにセキュリティ担当がいるのが理想ですが、プロダクトが多いとそうもいかず横断的にセキュリティを見ていく体制になっているようです。

 

そのような開発体制の話も大学にいては触れない話で新鮮でした。

 

また、通常はアプリケーションよりデータベースのほうが長く使われることが多くレガシーなものが多いことからそーだいさんからはデータベースの話がありました。

 

そこではまたもや初耳の"リファクタリング"という単語が出てきました。

 

リファクタリング(refactoring)とは、コンピュータプログラミングにおいて、プログラムの外部から見た動作を変えずにソースコードの内部構造を整理すること である。ーwikipediaより

 

データベースは一度動かしてしまうと止めることが難しく、書き換えて壊れたらかなり困ることになるのでリファクタリングが進まないそうです。

 

20年もののDBなど珍しくなく、テストもできない状態であるため、まずはテストができる状態にすることやそうならないために設計するときはしっかりと考えて設計を行うことが重要であるというお話がありました。

 

また、テストは「一度に完璧なものをつくろう」「一気にしよう」とするのではなく、小さなものから少しずつ改善、テストをするとよいとのことでした。

 

INFOエンジニア部でもネイティブアプリ開発をしているのでその知識は役に立ちそうです。

 

まんたろうさんからはレガシーコードをうまないために「コミットのコメントを工夫して過去を見やすくする」とよいという話もあったので私も気を付けていこうと思います。

 

他にもマイクロサービス化についてのセッション、多様化するエンジニアとしての生き方を語るセッションがあり、どれも興味深いものでした。

 

 

LTの感想

 

さくらじまハウス2日目にはLTの時間が設けられていました。

 

LTはLightningTalkの略で、5分程度の短いプレゼンのことを指します。

 

エンジニア業界ではこのようなカンファレンスや就活イベントなど様々な場所で行われています。

 

今回は学生3名を含む計11名が5分ずつどんどん交代しながら話していきました。
 

私は「KADAI INFOエンジニア部の取り組み -鹿児島大学をもっとおもしろく-」と題してお話させていただきました。

 

当日の様子は代表が写真を撮ってくれていました↓
 

f:id:kadaiinfo-tech:20200221204559j:plain

 

私はエンジニアコミュニティやサークルでLTは何度かしたことがありましたが、100人のエンジニアの前でするのは初めてのことでド緊張.....。

 
5分という短い時間に言うこと言わないと!と焦って話していた記憶があります。
 
KADAI INFOの紹介に加え、Androidアプリの少し技術的な話をしました。

 

以下が発表資料です。

 
 
正直、テスト期間中での内容決め&資料作りでかなり苦労しました....。
 
最初に自分で作ってみた時の資料はもっとまとまりがなかったのですが、エンジニア部の先輩方にアドバイスをいただき2度3度作り直しました。
 
適格なアドバイスをいただき本当にいい先輩方です。(感謝しかない)
 
その甲斐もあってか #さくらじまハウス2020 のタグにてリアルタイムで多くの反応をいただきました。

 

 

     
リアルタイムで反応が返ってくるのはイベントLTのいいところですね。
 

まとめ

 
さくらじまハウスに参加することで大学では学べない実際の開発現場の話やエンジニアの現状が聞けました。
 
そしてそのような方が登壇しているのを聞くだけでなく、直接話せる場でもありました。
 
私自身もLTをしたことで発表後多くの方に「KADAI INFOの方ですよね?」と声をかけていただきました。 
 
KADAI INFOを知っている方もいらっしゃったようですが、KADAI INFOが企業の広告を載せたりタイアップ記事を書いていることは知らない方が多いようだったのでKADAI INFOを知っていただくきっかけにもなったと思っています。
 
鹿児島大学生と鹿児島を盛り上げたい方、KADAI INFOで広告を出したい方などいらっしゃいましたらご連絡お待ちしております。 
 
以下、KADAI INFOサイトのお問い合わせからもしくはTwitterDM(個人アカウントでも可です!)で声をかけていただいてもOKです。
KADAI INFOエンジニア部、そして私セリナ個人としても引き続きITカンファレンスなどの外部イベントに積極的に参加していきたいと考えています。
 
テックブログも各個人更新していきますので次回もお楽しみに!

【第1弾】Android版「KADAI INFO」【リリースノート】

どうも、KADAI INFOエンジニアの中原です。
今回は、全人類が待ちに待ちわびた神アプリ「KADAI INFO」Android版公開についてお話するぜ!

KADAI INFOアプリとは?

一言でいうと、鹿児島大学生向けの便利な機能をつめこんだ超絶神アプリです。
鹿児島大学生向けなのに、どうして全人類が待ちわびたかって?思い込みは大事だぜ!
ちなみにアプリはこちら

play.google.com

本題に戻ろう。
鹿児島大学生向けの便利な機能ってのを現在実装されているもので説明していくぜ!

記事閲覧

KADAI INFOが掲載している記事をカテゴリごとに簡単にアクセスできるぜ!
カテゴリは具体的に言うと、「グルメ」「就職」「エンタメ」「やってみた」...などたくさんある!

f:id:kadaiinfo-tech:20200207161259j:plainf:id:kadaiinfo-tech:20200207161358j:plain

左の画像みたいに、カテゴリ一覧とそのカテゴリ内の記事が表示され、読みたい記事をタップすると右の画像のように、記事ページにアクセスできるぜ!
この時点で使いやすさが神っちゃいました!

時間割

今後実装予定~

このブログについて

はじめまして、KADAI INFOエンジニア長の藤澤(@fujisawa_kadai)です。

ついにKADAI INFOでもテックブログを書くことになりました!
KADAIINFOとは何ぞや?という人はこちらをチェックしてください!

基本的にはジャンル、技術レベルを問わず記事をアップしていく方針です。
よろしくお願いします。

エンジニア部メンバー