はじめに
初めましての人が多いと思います! 初投稿になります、はる と申します。
早速ですが、BSC24様をはじめとする数々の地震監視LIVEには "テロップ" というものが存在しているのをご存じでしょうか?
このテロップを自動でスライドさせているもの、それが "ティッカーソフト" です。(多分)
今回はそのティッカーソフトにまつわる3つのお話をしたいと思います。
自己紹介
名前: はる 所属: NDN自然災害防災ネットワーク 主な言語: C# 他にもPython, JavaSprict, html, PHP などなど 小説執筆、動画編集、SE作成(最近始めた)...etc まとめると、"多趣味"です。 現在受験生で、既に大学合格済みです。(この話は後程)デザインのすゝめ
早速1つ目のお話。デザインは、そのソフトの第一印象を決めるとても大切なものです。
私はデザインよりもプログラム中心なのでデザインに関しては詳しいことを言えません。自信がないのでほとんどのデザイン作成を外部に委託しているくらいです。それっぽいことを書いておくので参考としてご覧ください。
私がデザインを作るときに気を付けていることは大きく分けて2つです。
・見やすさ
・使いやすさ
まず "見やすい" デザインにするコツです。
この論文によると... 色相、彩度、明度が...etc とか言われてもわからない!って人のために大雑把に言うと、どういう配置にするか、どの配色にするかが鍵になってきます!
物は試し用。とりあえず作ってみましょう!
人間は右から左へ視線を動かすクセがあることが分かっています。その情報を軸に__大雑把に__例を作ってみました。
あらぁ... このデザインだと、みるべき情報があちらこちらに散らばってしまっていてとても見にくいですね。
見る側は不要な労力を使わざる負えない事態に陥ってしまいます。
目も疲れますし、もう見ようと思わなくなること間違いなし!
フム...これはいいんじゃないでしょうか?
右から順にみるべきものが整頓され、さらにフォントを変えることで見栄えが良くなりましたね!
学術的な配色についてはこの 地震情報アプリ界隈 Advent Calendar 2021 10日目 にSCさんが記事を書いてくださっているのでこちらを是非。
フォントに関しては用途に分けて使い分けるといいです。
今回の場合、重要なことを表示するので、角が丸くなった丸文字やギザギザしたフォントはオススメできません。
カクカクしたフォントにすると、緊張感が伝わってきてこのソフトの用途とピッタリですね。
ただ、角が丸いフォントを使うことで安心を届けるという目的なら別ですが。
さてさて、 "使いやすさ" について。良くありがちなのが、外身は良くても中身が最悪。地震観測ではOBSなどのソフトで外見だけをYouTubeへ流すことが多く、設定画面を見る人は配信者だけですね。そういった背景もあり、設定画面に手を抜く製作者も多いのではないでしょうか?
そんなんいいじゃん...どうせ見られるのは外見だけじゃん...
いいえ。確かにみられるのは外見だけ。たかが設定画面。されど設定画面。
人間と同じで、外見が良くても中身が最悪な人は 最初こそ人気であるものの、途中で捨てられたり、いざというときに使い物にならない。外ズラだけの関係になります。
ソフトも同じです。最初は使ってくれるでしょう。でも年月が経って新しいソフトが出てきます。
こっちのが使いやすい!
1回思われてしまえばもう終わり。未来はありません。
頑張って設定画面もデザインしたのに!って人も頑張ったことを後悔するかもしれません。それでも設定画面手抜きマンよりもよっぽど後悔は少ないはず。だって頑張ったんだもん。
やらないで後悔するよりやって後悔したほうが自分の為になります。
長々と話してしまいましたが、つまり、見る側が "素晴らしい! "と思えても、操作する人に "やりずら..." と思わせてしまったら外ズラの関係になっちゃうということ。プログラムにかけた苦労も水の泡です。
そうそう、デザインはできてもプログラムができないし...
いやいや、ちょっと待てと。この記事をなめてもらっちゃ～こまりまっせ!
プログラムのすゝめ
こっちが本業です。スラスラ筆が進みます。 まずはTwitterに寄せられた質問から答えていきましょう!  結論から言うと、 ・天気予報→気象庁xmlから ・気象警報→上に同じく ・津波情報→P2P APIv2から気象庁xmlは文字通りxmlなのでC#に加えxmlの知識が必要、P2PAPIはjsonなのでjsonの知識が必要です。 個人的にはjsonよりもxmlのほうが理解に時間がかかったかなぁ... ちなみに、jsonをC#で扱うときは Newtonsoft を使ってます。使い方についての記事は調べると結構あるので割愛します。
余談ですが、私も最近知ったんですけど、jsonを簡単にC#のクラスモデルにしてくれるサイトがあるんですよね。
これ、便利。
この記事を書いてくれた方には感謝しかないです。
次。  1秒毎にカクカクするソフト、ありますよね？ 地震関係のソフトを作ってる人の原因のほとんどがURLにアクセスした際に起こるものです。 EternityTelopではAPIを何個か叩いてるのと地図を描画しているので余計にカクカクしやすいです。 私も1年前まで知らなかったのですが、非同期処理をすることで治ってしまうんですねこれが。 非同期処理の説明は記事があるので調べてください。ここでは割愛します。 あとはTimerを使ってる人は不要な時に止めておくとか、Disposeするのを忘れないようにするとかですかね。 簡単にまとめてしまいましたが、これらをすることでソフトの質が上がることは間違いなしです！
本題に入ります。 作った/委託されたデザインに命を吹き込みましょう!(?) 当たり前ですが、前にも後にもこれができないとソフト作りは始まりません。 この記事ではC#限定で紹介します。ほかの言語の方はごめんなさい、、 ここで挫折した人は心優しい誰かに依頼してください() 私が主に開発をしている EternityTelopシリーズ(全5種類)は、 ・EEW情報 ・地震情報 ・天気情報 ・気象注意報・警報情報 ・津波情報 などなど、自然災害の防災配信をする上で必要な情報が概ね揃っています。 尚、このソフトは団体専用になっています。それは何故か。 シンプルに、使っている自作APIに同時接続制限があり、もし配布して大量に起動してしまうようなことがあれば、ソフトの遅延だけでなく団体にも迷惑が掛かってしまうからです。 同時接続数を増やすことはできますが、基本無償なのでそんなお金どこにもありません。 そんなEternityTelopですが、1人の管理者の一言で今までのテロップの常識を覆すことになります。
ブッチャケた話、テロップってずっと動いてても誰も見なくね
確かに... ってことで考えました。名付けて、テロップ随時配信方式(以下参照)  フローチャートの書き方がイマイチ...w 画像の見方が分からない方用に説明すると、普段はテロップを流さずに、情報が更新された時だけ流す仕組みをとったのです。 こうすることで配信者のPCの負担を抑え、視聴者にその時に必要な情報だけ提供出来るようになりました。
皆さんお待ちかね。コードの紹介です。 テロップソフトの基盤はこれ↓ teratail 【C#】テロップソフトを作りたい 完成です。
え？もっとなんかこう...これだけ？
はい、これだけです。 ただlabelを横流しするだけ。 本気で作ろうとした人はこれは知っていることと思います。 では、情報をどう流すか。 私が使っている テロップ随時配信方式 で無い場合、テロップはずっと動いているので、以下の通りです。  では、 テロップ随時配信方式 だとどうなるでしょうか。  こうなります。ちょっと複雑になりましたね。 ここに、更にEEWを表示させようとするとこうなります。  本当はこれに加えまだまだ処理があるのですが、書くと大変なことになりそうなので割愛します。 このように、基盤となるコードを中心にして必要なコードを足していく、基本的にはこれの繰り返しです。 EternityTelopみたいに、アニメーションを付ける場合はまた別のコードが必要になります。
...終わり？コードもっと紹介してよ...
たまにいます。こういうことするコード教えて！とだけ言って来る人。 この記事で散々言っていますが、まずは調べてください。 調べることで自己解決能力や問題発見能力が付くという表向きの答えだけでなく、人生を変えることもできるのです。
大学合格したお話
私は大学の情報系学部の総合型入試(旧AO)を受け、無事合格しました。 この入試でEternityTelopで生かした経験を発言しました。 中学生からこのような経験をすることは強みになります。(担当した塾の先生曰く) 以上です。この記事を見てる人はテロップソフトに興味がある人だと思うのでこれ以上はやめておきます() もし聞きたい人がいればまた別で記事にしようと思います。番外編: 地図描画ソフトに関するお話
どのように緊急地震速報の地図を描画してるのか
などの、描画についての質問をされることがあります。 NDNで使用している震度マップソフトは、実は私の自作ではありません。 ある方に改変･2次配布OKを条件に頂いたソフトを原型が分からなくなるまで改造させていただいたものなのです。 知ってる人も多いかもしれませんが、ここでは塗りつぶしの方法を伝授します。 1.日本地図を用意する(QGISがオススメ) 2.ペイントなどで全国を色分けする。 3.プログラムで色コードと都道府県を結び付ける
次に、
なんで画像描画処理なの？もっと早い方法あるのに！画質も良くなるし…
こういうツイートや話を耳にします。 以下は自分の考えです。 ･自分が作ってるのは配信用ソフトなので高画質にしても結局YouTube上で変換されてしまうので意味なし。 ･早いと言うが画像描画でも以下のように早いので困ってない。 よって、配布用でない限り画像描画以外のやり方には変更しません。