「新潟大学がもし100人の村だったら」という記事をGATALOGで書きました

GATALOGにも入ってる渡辺です。

「新潟大学がもし100人の村だったら」という記事をGATALOGで書いたのですが、記事の性質上あちらの記事上で説明を加えるわけにはいかないので、宣伝も兼ねてこちらで内容の解説等させてください。

GATALOGで記事書いた
執筆意図
今後の予定
技術解説
おわりに

GATALOGで記事書いた

GATALOGでは7月1日から毎日1記事は更新されるようになっています。
メンバーが順番に公開していて、現在20人強のメンバーがいるので20日に1回ぐらい渡辺の番も回ってきます。

渡辺のGATALOGでの最初の記事(奇術研のもあるけどノーカンで)は7月2日に公開されたものです。
Slackに送ったものをコピペするだけという、かなり手抜きになっています。

https://gatalog-niigata.com/about-500-characters-lecture/

こっちはこっちで「最初の方に公開される記事だからGATALOGに関連したものの方が良いかな」とか「GATALOGに入ろうと思ってくれる人がいるなら早めに入ってもらったら都合が良いな」とか「順番早くて内容考えるの面倒だな」とか意図はあるのですが、今回のものはそれとは毛色が異なります。

今回書いた記事はこちらなので、未読の方は是非お読み下さい。
それなりに頑張って書いております。

https://gatalog-niigata.com/if-niigata-univ-100-people-1

執筆意図

なぜこんな感じのテーマ設定になったのか説明します。

渡辺、このサイトでも記事を更新しております。
で、その内容は「何かが起こってそれを記事にする」という流れで書き始めるのがほとんどです。

最近更新された記事

最新5件の記事が表示されるようにしとくので良かったらこれらも読んでくださいー！
多分大体「何かが起こったから記事にした」ものなんじゃないかと思います。

一方でGATALOGの毎日更新、順番が決まっています。
これは上記のスタイルとの相性が悪いです。

記事にできるような出来事があっても丁度良く順番が回ってくるか分からないですし、逆に順番が回ってきても記事にできるような出来事がないかもですし。
順番が回ってくるまで温めておくのもまあアリですけど、そういう系はできるだけ早く出した方がウケが良いので微妙です。

なのでどうするか。
いつでも書ける記事を書くことにしました。かつシリーズものにしとくと毎回テーマを考える手間が省けます。

数字扱うの割と楽じゃん？

このサイトでも主に新入生向けの記事でどっか別のとこで公開されてる資料とか数字とかを解説するだけの記事ってやっているのですよね。

例えばパソコンのは生協の資料に説明と独自見解を加え、サークル何個のやつとか健康診断でブラするののやつではアンケート結果に解説を加え、という感じ。

新大生がパソコン選ぶための基準解説！

大学入学を機にマイパソコンを買う新入生がほとんではないでしょうか。この記事ではパソコンについてある程度分かる人には「新潟大学ではどんなパソコンが必要なのか」、パソコンについて全く分からない方には「どういう基準で選んだら良いのか」知ってい...

新潟大学の生協パソコンってどうなん？高い？？価格比較など

生協PC、毎年物議を醸すんですよね。生協サイドは当然生協PCをオススメしてきます。オススメというかゴリ押ししてきます。その反動なのか、Twitterを中心に先輩サイドは生協PCをやたらディスります。どっちもやり過ぎだよ…...

みんなサークル何個入るの？アンケートしてみた

新入生の方、もう入るサークル決まりました？5月初めから本格的にサークルの一員として活動し始めるサークルが多いので、そろそろ絞っておきたいところですよね。そこで迷いそうなのが「何個ぐらいのサークルに入れば良いのか」。高校までは...

健康診断の時のブラジャーどうすりゃいいの？

新大生であれば毎年全員が受けなければいけない健康診断。その服装に「Ｘ線検査があるから無地のTシャツ」という指定があります。Ｘ線検査…金属映る…ブラジャーのワイヤーは…？みんなどうしてるんや…？と気になったのでTwit...

こういうの、一から考えるのに比べると楽なのですよね。人によるのかもですけど。
読み手にとっても、多分有用なんじゃないかと思います。内容の根拠が数字なり資料なりで示されてるわけで。
楽なのに読み手に喜ばれる、こりゃこの方向でやるっきゃないですね。

ということで新大が公開してる資料に解説を加える方向で考えました。

もし100人の村だったら

世界が100人の村だったらって知ってます？？

調べたら2000年代前半に広がったネットミームでその後書籍化もされたらしいです。
渡辺はなんで知ったんですかね。いやでも有名ですよね？

63億人いる世界の人口を100人に縮めて、要は割合で表すとこうなりますよ～って内容です。
男女の割合とか宗教の割合とか基本的な事項から始まり、貧富の差なんかに触れられて最終的に「あなたはこんなに恵まれてますよ、平和を愛しましょう」という結論に着地します。

和訳の全文がこちらで読めるので興味があれば読んでみても良いでしょう。

　世界がもし１００人の村だったら

これのパロディしつつ新大にまつわる割合とか説明したら面白いじゃろ～という感じです。

ちなみに日本の男女比、渡辺も男性の方が多いものと思ってました。
それで調べてみたら実際は女性の方が多いということで驚きです。

もしかして男性が多いと思ってたのは渡辺だけなのでは…？高校までのクラスの男女比から男性が多いと勘違いしてただけで、世間的には女性の方が多いことなんて常識なのでは…？
と心配になってTwitterでアンケート取ってました。

アンケ
直感として、日本の男女比は、
— 渡辺和希 (@watatanabe) July 19, 2019

半分の人は男性が多いと思ってたみたいなので良かった…。

物語に

それだけではシリーズ仕立てにするには弱いので、物語形式にすることにしました。

これ、コメディとして面白いでしょ？？と思っているのですけど、面白いですか？？

これを面白いと思える方は渡辺と似たセンスをお持ちなのでしょう。今後のシリーズもこういう系でお届けしますので、ご期待ください。

これを寒いと思う方は残念ながら今後のシリーズも寒いと思われてしまうかも知れません。これからますます暑くなってきますので、涼むために是非次回以降もお読み下さい。

パパとミカちゃん

言葉で説明するの難しいですけど、こういうシュールギャグ？みたいな？ツッコミ不在？みたいな？の好きなのですよね。
中学からこのテイストなの変わりません。

パパとミカちゃんがお話してく形式ですけど、ミカちゃんが難しい言葉使うとことか「めちゃくちゃ面白いやんけ…」と思いながら書いてます。
読み返すと別に何も面白くないのですけど、冷静になったら負けです。

登場人物の欄も好きです。
パパ、ミカちゃん、ママと3人の紹介が書いてありますが、今後のシリーズ含めてもママが登場する予定は全くありません。
「いやママ登場しないんかーい！めちゃくちゃ面白いやんけ…」と思いながら書いてます。
登場人物欄は登場人物欄でストーリーが展開してく予定でいます。

パパとミカちゃんが新潟大学の話をしてるだけじゃつまらないので、それ自体物語として進められるような構成を考えています。
一番最後の「おやすみ」の項なんかは次回以降に繋げるための伏線ですね。
こっちはfunnyの方の面白いではなくinterestingの方の面白いと思ってもらえたら良いなと。

今後の予定

記事更新自体は大体20日周期で順番が回ってくるので20日に1回ぐらい更新します。

更新したい内容があったら順番じゃない日にも追加で更新していいよというルールにはなってますが、このシリーズに関しては毎日更新の枠で更新します。

全部で3～5回ぐらいかなと思ってますが、まだちゃんと構成練ってないので何とも言えないです。

扱うデータに関しても、パパ達のストーリーに関してもざっくりしたアイディアが頭の中にあるだけなのでどうなるか分かりません。
特にストーリーの方は考えてる伏線を上手く活かせるのか心配です。

もしかしたら辻褄合わないとこをこっそり書き換えるかもですね。

技術解説

興味ない方は読み飛ばしてください。

吹き出し

GATALOGではWordpressのCocoonというテーマを使っています。このサイトもですけど。

Cocoonには吹き出しを追加する機能があるのですが、今回はそれは使っていません。
GATALOGが吹き出しについてかなり独特な運用をしていて使い物にならないからです。
これは完全にGATALOGが悪いので後ほど直してもらおうと思います。

GATALOGで吹き出しを多用した記事に、例えば以下のようなものがあります。

https://gatalog-niigata.com/niigatauniversity-event-compa/

これ、各団体が喋ってる風に画像を左端に表示するために吹き出し機能を使ってはいますが、吹き出しのバルーン自体は表示されていません。
どうやって非表示にしているかというと、テーマのstyle.cssに各クラスを指定してborderが白色になるようにされています。

このことの問題点としては下記のような問題が考えられるでしょう。

style.cssは管理者しか弄れないため、他のメンバーが同様の実装をすることができない。
style.cssは全ページに読み込まれるため、関係ないページで余計なcssが読み込まれる。
吹き出しを追加したりする度にstyle.cssを書き換える必要がある。

今回困ったこととしては、吹き出し色を無理矢理変更してるせいで今回作成しようとしたページで吹き出しの色がおかしくなってしまったことです。
吹き出しの色全体をピンクにしたいのに、矢印？の部分だけが青くなってしまいました。
原因が全く分からなかったので、じゃあCocoonの機能使わないで自分で実装するか～となりました。

以下のページを参考に若干改変を加えています。

CSSだけで吹き出しをつくる！デザインサンプル26個

CSSだけでつくれる「吹き出し」のデザインサンプルを26個、用意しました！どのサンプルもコピペで利用することができますので、デザインの参考にぜひ取り入れてみてください。

以下のCSSをWordpressだったら編集ページ下の方の「カスタムCSS」という欄にコピペしたら今回の記事と同様の吹き出しが使えるので、良かったらご活用下さい。

↓カスタムHTMLブロックに以下をコピペ、画像のURLとか適宜修正。登場人物によってclass内の文字列変更。

<div class="orig-balloon balloon-papa"> <!-- baloon-papaの部分は適宜変更する -->
<div class="icon"><img src="画像URL"><br>名前</div>
セリフ
</div>

↓カスタムCSSに以下をコピペ、色とか修正。登場人物増えるなら下の2項目は適宜増やしてく。

.orig-balloon{
  position: relative;
  padding: 5px;
  border-radius: 8px;
  color: #000;
  background-color: #fff; /*吹き出しの背景色*/
  margin-left: 70px; /*アイコンのサイズによって調整*/
  display: table;
  min-height: 50px;
}
.orig-balloon .icon{
  position: absolute;
  left: -70px; /*アイコンのサイズによって調整*/
  top: 0;
  font-size: 50%;
  text-align: center;
}
.orig-balloon .icon img{
  width: 50px; /*アイコンのサイズ変更*/
  border-radius: 50%;
}
.orig-balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 5px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.orig-balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 5px;
  border-right: 15px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/*-papaのとこは色のバリエーションの数だけ増やしてく*/
.balloon-papa, .balloon-papa img{
  border: 2px solid #87cefa; /*吹き出しの色*/
}
.balloon-papa::before{
  border-right: 15px solid #87cefa; /*吹き出しの色*/
}

ということでGATALOGは直して欲しい

吹き出しの追加は管理権限でしかできません。
あのような画像を差し替えるだけであればCocoonの機能として、画像部分クリックすれば別の画像選べるようになっています。
なので人物が増える度に管理者権限で吹き出しを追加する必要はありません。

個別ページ用のcssであればstyle.cssでなく記事毎のカスタムcssに記入すべきです。

その際、同じ内容の変更であれば「,」で区切ってセレクタを列挙できることも申し添えておきます。

.sb-id-13 .speech-balloon{
border:2px  #ffffff ;
}
.sb-id-13 .speech-balloon::before {
border-right: 12px #ffffff;
}
.sb-id-14 .speech-balloon{
border:2px  #ffffff ;
}
.sb-id-14 .speech-balloon::before {
border-right: 12px #ffffff;
}

こうでなく、

.sb-id-13 .speech-balloon,.sb-id-14 .speech-balloon{
border:2px  #ffffff ;
}
.sb-id-13 .speech-balloon::before,.sb-id-14 .speech-balloon::before{
border-right: 12px #ffffff;
}

こう。

というか白色にするだけだと背景色変えた時に見えちゃうので、border:none;で消しちゃった方が良いですね。

Font Awesome

他に技術的なこととして、Font Awesomeも使ってます。
人のアイコンが100人分並べてあるところです。

Font AwesomeというのはWebフォントを読み込んで画像みたいなのが表示できるよ、っていう感じのサービスです。

CocoonではデフォルトでFont Awesomeの4.7.0というバージョンが使えるようになっています。
ただ、現在の最新バージョンは5.9.0です。

5系ではFont Awesomeの記述方法が4系から変わっており(<i class=”fa fa-mare”>から<i class=”fas fa-male”>)、今後Cocoonで使用するバージョンが更新された時に使えなくなると嫌だなと思い今回の記事では5.9.0を使用することにしました。

Font Awesomeを使用するには<head>内に<link>でCDNからcssファイルを読み込む必要があります。
ただ、個別ページ用に<head>を直接変更することはできません。
そこで、カスタムJava Scriptに以下のように記述しました。

$("head").prepend('<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">');
$("head").prepend('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css">');

jQueryを使って、()の中のやつを<head>の先頭に挿入してね～という内容です。
prependでなくappendでも良いかもですが、まあ好みの問題でしょう。

おまけで2つ目にFont Awesome Animationも読み込んでいます。
こっちはFont Awesomeのアイコンを動かすためのもので、ただ表示するだけなら必要ありません。
ウェイが騒いでるぜのとこを動かしたかったので入れました。