カロリーメイトリキッドのツイートの秘密知ってますか？

最近Twitterで
カロリーメイトリキッドのこんなツイート
よく目にしたりしませんか？

＼仕事にうちこむ、すべての人へ／
プログラミング言語で書かれたメッセージを公開中！#プログラマーの皆さん、ぜひ読んでみてください。
CalorieMate to Programmer#うちこむ人にバランス栄養 #カロリーメイトリキッド
— カロリーメイト (@CalorieMate_jp) August 3, 2020

でもプログラマーの人は注目して！
みたいな感じなので
プログラム慣れしていない人たちは
スルーしちゃってるかもですね。
あるいはツイートからカロリーメイトリキッドの
特設サイトにいってはみたものの
多少サイトの作りが凝ってるぐらい？
程度で話が完結しちゃってたり
今回のプロモーションの真意みたいなものを
知ることなく終了しちゃってることもありそう。

そんなわけで今回は
プログラマーじゃなくっても
カロリーメイトリキッドの特設サイトを
楽しんでもらうための記事を書いてみました。
プログラム慣れしてる人でも
あまり注目してなかった人は
この記事をきっかけに遊んでみてください。

ちなみにこの記事の目標は、読んだ方たちが
シークレットキャンペーンを見つける事ですｗ

というわけで今回のお品書きはこちらになります。

カロリーメイトリキッド×プログラミング＝？
- カロリーメイトリキッドの特設サイトには何が？
- カロリーメイトリキッド特サイトの構成
Special CUI MODEってなんなの？
まとめ

カロリーメイトリキッド×プログラミング＝？

カロリーメイトリキッドは
大塚製薬さんの新商品。
前述のツイートはその新商品の広報の一環で
プログラミングとコラボすることによって
ちょっと話題性をかっさらって
新商品の知名度もアップしよう
というのがコンセプトなのでしょう。

www.otsuka.co.jp

カロリーメイトリキッドの特設サイトには何が？

前述のツイートから
特設サイトにアクセスできるんですが
一見すると
商品やキャンペーンの説明があるだけで
なんてことないサイトにも見えます。
でもよくよく見ると
プログラムっぽい記述があったりして
プログラマー的には
『意味がありそう、解読してみよう』
て思ったりするんじゃないでしょうか。
一般的にはなんだかよくわからず
サイトをそっ閉じしてしまうかもですね。

そしてプログラミング経験とかある人なら
ツイートの訴え内容を見た時点で
直感的に『絶対隠してるものがある』と感じ
特設サイトのとあるメニューに
注目するんだろうなぁって思います。
私もちょっと遊び心をくすぐられたのでｗ

カロリーメイトリキッド特サイトの構成

カロリーメイトリキッドの特設サイトは
以下の5つのカテゴリで構成されています。

TOP
MESSGES
Special CUI MODE
PRODUCT
CAMPAIGN

それぞれのカテゴリについて
さらっと触れていきます。

【Category1】TOP

サイトの導入部分です。
特に変わったことは書いてはありません。
が、初期表示の場合のみ
何やら文字が書かれていたものが
カロリーメイトリキッドの画像に変化します。
何が書かれているのを読み解いてみたら
カロリーメイトの原材料でした。
ちょっとプログラムっぽく見せかけつつ
実はただの原材料の一覧っていう罠ですｗ

ちなみにこの原材料の文字は
画像部分をドラッグすれば選択できるし
なんだったらサイト全体を選択してみても
画像の裏に隠れたままのことがわかります。

【Category2】MESSGES

一見プログラミングコードが何セットも
あるように見えます。
が、実はカロリーメイトリキッドの
キャッチコピー的文章を
プログラミング言語で表しただけ。
プログラミング言語は
パッと見、C言語っぽかったりVB *1っぽかったり
HTMLやSQL言語に加えてマシン語 *2まで
結構多岐にわたってて見てて面白いです。
プログラミング知識の無い方からすると
本当になんのこっちゃだと思いますが。
でもどんな内容かはTranslateボタンを押すと
日本語に訳されるのでわかります。
プログラムコードと訳を対比してみると
ちょっとプログラミングが分かった気に
なれるかもしれませんｗ

ちなみにこのコードの監修をしたのは
知る人ぞ知るプログラミング言語 Rubyの開発者
まつもとひろゆきさんで
インタビュー記事も載ってます。

【Category3】Special CUI MODE

このCUI MODEは
この特設サイトで最も重要なカテゴリです。
これについては後述するので
ここでは一端スルーします。

【Category4】PRODUCT

なんてことのない商品紹介です。
成分についても図表を使って説明されてますが
何か変わったことがあるわけでもなく。
オンラインストアへのリンクもありますね。

【Category5】CAMPAIGN

新商品のキャンペーン紹介です。
8月3日10時から8月16日23時59分の期間中に
プレゼントキャンペーンをやってるから
応募してねってことです。
応募方法はTwitter方式ですね。
これも特に何も変わってることはありません
ごく普通の内容です。

ちなみに私は
”このキャンペーンは”
応募してませんｗ

Special CUI MODEってなんなの？

特設サイトにある3つ目のカテゴリ
「Special CUI MODE」が一体何者なのかを
ここでは解き明かしていきます。

そもそもCUIっていう言葉自体が
ITに慣れ親しんでいたとしても
知らな人がいるかもしれませんよね。

CUI MODEってなに？

CUIとは
Character-based User Interfaceの略で
コンピュータとの対話方式が
文字ベースであることを示しています。
文字っていうのはいわゆる命令コマンド
ってことになるんですけどね。

逆に今みなさんが使っているスマホやPCは
GUIで動いています。
GUIとはGraphical-based User Interfaceの略で
アイコン等のグラフィックスベースで
コンピュータと対話する方式です。

このCUI　MODEの環境は
仕事や趣味等で
より深くコンピュータと関わっていないと
現状はなかなか触れる機会がないかもです。
Windowsだとコマンドプロンプトとか
PowerShellが該当するんですけど
まぁ一般的には使わないかもしれません。

CUI MODEでできることは？

じゃぁその文字ベースのCUI MODEで
一体何ができるのかってことですよね。

まず一言でいえば
内容自体は最初に表示される特設サイトを
GUI MODEと呼ぶすると
CUI MODEで確認できる内容は
基本的にはGUI MODEと変わりありません。
GUI MODEで閲覧できた
商品情報だったり
プログラミングコードで書かれた
キャッチコピーだったりを
CUI MODEでも同じように見れます。
違うのは、CUI MODEの場合
命令コマンドを打ち込まないと
GUI MODEと同じように見れないことです。

とか言ってると
なんでそんな面倒なことするの？
必要ある？
とか思ったりしますよね。
本当にその通りですｗ
ただ手間なだけでどう考えたって
GUI MODEだけで完結すれば
いい話なのは当たり前です。

でもそれじゃーこのCUI MODEが
『Special』を冠している意味がありません。
つまり、CUI MODEには
GUI MODEでは確認できないものを
確認することができるんです。

CUI MODEを体験してみる

なにはともあれ触ってみることが大事なので
CUI MODEがどんな感じなのかを体験しましょう。

GUI MODEの下部に表示されている
メニューの
「Special CUI MODE」を
タップすると画面が以下のようなCUI MODEに
切り替わります。

カロリーメイトリキッド特設サイトでCUI MODEにログインした状態

カーソルが点滅した状態になっていますが
これはコンピュータが
命令を待っている状態です。
何か言ってくれないと何もしないよ
ってことですね。
でもどんな命令が使えるかなんて
知りませんよね？
そういう時はとりあえず適当な文字を
打ち込んでみますｗｗｗ

カロリーメイトリキッド特設サイトのCUI MODEで適当に命令コマンドを打ち込んでみた状態

『そんなコマンドは知らないよ！
使えるコマンドリストは
helpコマンド使いな！』
て言われましたので
その通りにやりますｗ

カロリーメイトリキッド特設サイトのCUI MODEでhelpコマンドを打ち込んでみた状態

どうやらこのCUI MODEで使えるコマンドは
8つあるようです。
※あくまで一覧に出ているのはｗ

これらのコマンドを駆使して
カロリーメイトリキッドの商品説明や
関連画像を表示してみたり
TwitterやFacebookで情報共有したり
ていうことをやってみて
てことなのでしょう。

簡単にこれらの8つのコマンドについて
以下で触れていきます。

ちなみに念のため補足しておくと
コマンドを実行するには
コマンド入力後に必ずエンターを
押してくださいね！

CUI MODEの8つの基本コマンド

【コマンド1】cat [file]

catコマンドは
指定したファイルの中身を表示します。
このCUI MODEでは拡張子が
「.md」または「.txt」のファイルを
表示する場合に使います。
ちなみにこのcatコマンドは
「連結する」を意味する「catenate」の略で
名称からだと命令内容がわかりずらい
コマンドだったりしますｗ

使用例：$cat readme.md

【コマンド2】cd [dir]

cdコマンドは
Change Directryの略です。
つまり、今いるディレクトリから
別のディレクトリへ移動します。

使用例1：$cd LIQUID
現在のディレクトリ内に存在するLIQUIDディレクトリへ移動

使用例2：$cd ..
現在のディレクトリから一つ上の階層のディレクトリへ移動

【コマンド3】date

dateコマンドはそのまんまです。
現在日時を表示します。

【コマンド4】history

historyコマンドは
使用したコマンドの履歴一覧を表示します。
通常だと履歴番号で過去に実行した命令を
再実行できたりするんですが
このCUI MODEでは実装されてないっぽいです。

【コマンド5】imgcat [img_file]

imgcatコマンドは
最初に出てきたcatコマンドの
画像ファイル表示版です。

使用例：$imgcat goods.png

【コマンド6】ls [-a]

lsコマンドもそのまんまです。
現在いるディレクトリ内に存在する
ファイルやディレクトリの一覧を表示します。
「-a」を付けると、隠しファイルも含めて
全て表示されます。
つまり「-a」を付けていない場合は
隠されてるものは表示されませんので。

使用例：$ls -a

【コマンド7】open [link_file]

openコマンドは
Webページを表示します。
拡張子が「.link」のファイルが対象です。

使用例：$open twitter.link

【コマンド8】share [ -fb | -tw ]

shareコマンドは
TwitterあるいはFacebookで
この特設サイトを共有するためのコマンドです。
予め内容は設定されていて
コマンドを打ち込むとブラウザ版のTwitter等が
内容も入力された状態で開きます。
ブログやYouTubeのSNS共有ボタンと同じです。

使用例：$share -tw

helpにないコマンドも！？

実はhelpには記載のないコマンドも
あったりします。
じっくり調べてないのでhelpに無いけど
使えるコマンドがどれぐらいあるかは
不明です。
※Linux系のコマンドは結構使えるのかもしれません。
とりあえず現時点で私が認識しているものだけ
触れておきます。

【隠しコマンド1】pwd

pwdコマンドは
print workgin directoryの略で
現在位置のパスをルートからフルパスで
出力してくれます。
よくわからないかもですが打ち込むと
なんとなくわかるんじゃないでしょうかｗ

使用例：$pwd

【隠しコマンド2】exit

exitコマンドも名前のとおりです。
CUI MODEから抜けてGUI MODEに戻ります。
何気にGUI MODEに戻るときも
ちょっと凝った作りになってます。

使用例：$exit

【隠しコマンド3】シークレットｗ

3つ目は敢えて伏せておきますｗ
これは今までに上げてきたコマンドを駆使すると
見つかるはずのものです。
しかもコマンドは１つじゃなくて2つです。

一つはおまけプログラムの実行に必要で
もう一つはシークレットキャンペーンの応募に
必要となります。
今回このシークレットキャンペーンが大事ですｗ

隠されたコマンドを打ち込まないと
シークレットキャンペーンには
応募できませんからね。
これは是非ご自分で探してみてください。
難しくはないと思います、たぶん・・・ｗ

CUI MODEでのちょっとしたテクニック

コマンドをある程度一通り紹介したので
コマンドを打ち込む上での
ちょっとしたテクニックも
ここで教えちゃいます。

ファイル名の自動補完機能を活用しよう

何かしらのファイルを開く時に
ファイル名を全部打ち込むのって
面倒臭いですよね？
そんな時はファイル名の最初の方だけ
入力してTABキーを押すと
ファイル名の一部に重複がなければ
勝手に入力補完してくれます。

例：$cat r　←この時点でTABキーを押す
　　　↓
　　$cat readme.txt　←readme.txtの2文字目以降が自動補完される

ただし同一ディレクトリ内にreadme1.txtとreadme2.txtが存在した場合は「readme」までが被ってしまうのでこの場合はせめてreadme1までの入力が必要です。

過去に使用したコマンドは矢印上キーで

開きたいファイルが直前のファイル名と
たいして変わらない場合は
打ち込んだコマンドをまた呼び出して
再利用した方が効率がいいですよね。
そんな時は矢印上キーを押してください。
1つ前に実行したコマンドが出てきます。
1回押すごとに、1つ過去の履歴に遡ります。

特にこの特設サイトの場合は
ファイル名が数字の連番以外同じ
ていうファイルが多いので
矢印上キーは活用した方がよいでしょう。

CUI MODEで遊んでる動画を公開

ここまでの説明でとりあえず
CUI MODEでコマンドを打ち込む遊びは
できるんじゃないかと思います。
まだよくわかんないっていう場合は
Twitterでお報せくださいｗｗ

ちょっとやってみると感じると思うんですけど
コンピュータにコマンドを打ち込んでると
ちょっとハッカーになれたような気分に
なりますｗｗ
映画とかドラマだとハッカーって
やたらとキーボードをたたきまくってるから
同じような感覚に陥ること間違いなしです！
※まぁあれはあくまでも誇張したイメージだけどｗ

海外ドラマの「24」のクロエとか
「ミッション:インポッシブル」のベンジーとか
あと「STEINS;GATE」のダルとか
あの辺の凄腕ハッカーになってる気分で
お楽しみくださいｗ

24 -TWENTY FOUR- シーズン3 (SEASONSコンパクト・ボックス) [DVD]

発売日: 2010/08/04
メディア: DVD

ミッション：インポッシブルフォールアウト (字幕版)

発売日: 2018/11/06
メディア: Prime Video

STEINS;GATE コンプリート Blu-ray BOX スタンダードエディション

発売日: 2018/04/25
メディア: Blu-ray

そしてせっかくなので
私がちょっとコマンドを打ち込んでる動画も
公開しておきます。
伏せてたものがネタバレになってるけど
実は作ったご本人さまが
既にツイートでばらしてたのを見たので
まぁ別にいいかなとｗ

CalorieMate To Programmer CUIモードを操作してみた

まとめ

今回はカロリーメイトリキッドの
特設サイトについてまとめてみましたが
いかがでしたか？

まだノータッチだった方は
是非遊んでみてください。
感想も頂けると嬉しいです。
そして是非シークレットキャンペーンを
探し出して応募してみてください。
※応募するしないは個人の自由ですがｗ
シークレットキャンペーンの期間は
通常プレゼントのキャンペーンよりも
期間が長くて今月一杯なので
まだまだ時間はあります。

こんな感じのメッセージが見つけられたら
このゲーム完クリですよ！ｗ

シークレットキャンペーンを無事見つけるとこんなメッセージが表示される

そして今回の経験を通して
プログラミングに興味の沸いた方は
こちらのぷよぷよプログラミングも
挑戦してみるといいかもしれません。

tsukumogatari.hatenablog.com

では今回はこの辺で。
ここまで読んで頂きありがとうございました！

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ここからは当サイトの宣伝です。

ツクモガタリは
以下のランキングサイトに参加しています。
バナーをポチって頂けると
今後の励みになります！
にほんブログ村

人気ブログランキング

また、ツクモガタリは
歴史人物の記事を主戦場としつつ
ブログ運営関連の記事なども投稿している
雑記ブログです。
こちらのINDEXページは
各記事のカテゴリの説明と共に
ピックアップ記事や
カテゴリの記事一覧へのリンクも
掲載しています。