投稿日: 
メメタァ
というわけで、GWが終わりますね。どう過ごされましたでしょうか。
僕は、おチビさん二人を引きずり回し(回され)ながらGWを過ごしました。
そんなどうでもいい事はさておいて、いきなりメメタァとわけの分からない言葉で始まりましたが、知っている人には当たり前？のフレーズですよね。
そうです、これは「ジョジョの奇妙な冒険」に出てくる有名な擬音語です。
メメタァとは (メメタァとは) [単語記事] – ニコニコ大百科
(僕は、ぶっちゃけ何を意味しているのか全くわかりません)
さて、なぜこんな事を書いたかというと先日書いたYosegakkyで送別した人がジョジョ好きだったんですね。
で、まぁ、普通のやつじゃあつまらないと、なんとかジョジョ風味を出したいと、いきり立ちまして少しジョジョ風味を出して披露してみましたよ。と、そんな事を少し書きます。
とりあえずこんなやつ作った
https://shimabox.net/labs/yosegakky_jojo/
特徴
- ジョジョフォントをタイトルとローディング部分で使っている
- それだけ
- ジョジョフォントは以下2つを使っています
- タイトル部分
- ローディング部分
- 上記いずれもこちら ジョジョフォントを使って「ドドド」しようぜ！ を参考にさせて頂きました
- これらのフォントを使用する場合、各フォントの使用規約に注意してください
ジョジョフォント
まず、どうやってジョジョ風味を出すか。それはあまりジョジョを知らない僕でも簡単でした。
そう、あのフォントです。あのフォントを使った文字があればジョジョ風味が出るんでは無いかなと3秒で思いました。
それでググったところ上記のジョジョフォントに辿り着いたわけです。
全部をジョジョフォントにするのは少し難儀だし、わけわからんし、というわけでタイトルとローディング部分に適用することにしました。
修正方法
元のソースは https://github.com/shimabox/yosegakky です
assets/css/style.css の修正
上記のこちらを参考にフォントをダウンロードしておきます。
※例ではassets直下にfontディレクトリを作成してそこに配置しています
そして、ジョジョフォントを適用するために@font-face（ウェブフォント）を使います。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | /** こんな感じで定義して */@font-face { font-family: 'jojomix'; src: url("../font/JOJOMIX_.TTF");}@font-face { font-family: 'bizarg'; src: url("../font/BIZARG__.TTF");}/** こんな感じで適用させる */#header { font-family: 'bizarg';}.overlay-message > .jojo { font-family: 'jojomix'; font-size: 5rem;} |
差分(git diff)はこんな感じ
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | diff --git a/assets/css/style.css b/assets/css/style.cssindex 6561238..484b9fe 100644--- a/assets/css/style.css+++ b/assets/css/style.css@@ -1,3 +1,15 @@+@font-face {+ font-family: 'jojomix';+ src: url("../font/JOJOMIX_.TTF");+}+@font-face {+ font-family: 'bizarg';+ src: url("../font/BIZARG__.TTF");+}+#header {+ font-family: 'bizarg';+}+ #wrap-memories { display: none; }@@ -38,6 +50,11 @@ vertical-align: middle; }+.overlay-message > .jojo {+ font-family: 'jojomix';+ font-size: 5rem;+}+ @media (max-width: 544px) { .card > .dummy-img { display: none;@@ -75,8 +92,7 @@ /*! override bootstrap.css */ .jumbotron {- padding-top: 2rem;- padding-bottom: 2rem;+ padding: 2rem 0.5rem; margin-bottom: 0; background-color: #fff; }diff --git a/assets/font/BIZARG__.TTF b/assets/font/BIZARG__.TTFnew file mode 100755index 0000000..3334b6fBinary files /dev/null and b/assets/font/BIZARG__.TTF differdiff --git a/assets/font/JOJOMIX_.TTF b/assets/font/JOJOMIX_.TTFnew file mode 100755index 0000000..bd8ea72Binary files /dev/null and b/assets/font/JOJOMIX_.TTF differ |
assets/js/yosegakky/config/config.js の修正
ジョジョ風味を出すか出さないかのフラグ用プロパティ(jojo_effect)を以下の様に定義しておきます。
01 02 03 04 05 06 07 08 09 10 11 | Yosegakky.Config = { ・ ・ // @type {array} ヘッダーのタイトルクリック時に表示させるスライドショーの内容定義 "memories": [ // {"file_name": "", "title": ""} ], // @type {boolean} ジョジョエフェクトをかけるか "jojo_effect": false}; |
差分(git diff)はこんな感じ
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | diff --git a/assets/js/yosegakky/config/config.js b/assets/js/yosegakky/config/config.jsindex 192a3b5..67a3c5e 100644--- a/assets/js/yosegakky/config/config.js+++ b/assets/js/yosegakky/config/config.js@@ -73,9 +73,12 @@ Yosegakky.Config = { // @type {number} overlay(loading)を何msかけてfadeoutさせるか "overlay_fadeout_time": 1500,- + // @type {array} ヘッダーのタイトルクリック時に表示させるスライドショーの内容定義 "memories": [ // {"file_name": "", "title": ""}- ]-};\ No newline at end of file+ ],++ // @type {boolean} ジョジョエフェクトをかけるか+ "jojo_effect": false+}; |
assets/js/yosegakky/models/message.js の修正
ローディング部分にジョジョフォントを使った文字を表示させる為にmodelを少し修正します。
※ランダムな文字列を返して、それにジョジョフォントを適用させる寸法
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // defaultsにジョジョフォント適用のプロパティを定義defaults: { ・ ・ "lineClampClassName": "", "jojo": "" // こいつを追加},prepare: function () { ・ ・ this.set('inlineId', this.cid); // ユニーク番号をセットする // ジョジョ風味を出すプロパティがtrueの場合の処理 if (Yosegakky.Config.jojo_effect === true) { this._settingJoJo(); } return this;},// ジョジョフォントを適用させるランダムな文字列をセットする_settingJoJo: function () { var c = 'abcdefghijklmnopqrstuvwxyz'; var cl = c.length; this.set('jojo', c[Math.floor(Math.random()*cl)]);} |
差分(git diff)はこんな感じ
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | diff --git a/assets/js/yosegakky/models/message.js b/assets/js/yosegakky/models/message.jsindex ea211d8..d09a8e8 100755--- a/assets/js/yosegakky/models/message.js+++ b/assets/js/yosegakky/models/message.js@@ -16,7 +16,8 @@ "imgPath": "", "hasImg": false, "isDummyImg": false,- "lineClampClassName": ""+ "lineClampClassName": "",+ "jojo": "" }, /**@@ -30,6 +31,10 @@ this.set('inlineId', this.cid); // ユニーク番号をセットする+ if (Yosegakky.Config.jojo_effect === true) {+ this._settingJoJo();+ }+ return this; },@@ -70,6 +75,13 @@ } this.set('lineClampClassName', ' ' + className);+ },++ _settingJoJo: function () {+ var c = 'abcdefghijklmnopqrstuvwxyz';+ var cl = c.length;++ this.set('jojo', c[Math.floor(Math.random()*cl)]); } }); |
index.html の修正
タイトルと、ローディング部分にジョジョフォントを適用させたいので該当箇所を修正します。
タイトル部分
config.titleに直接ジョジョフォント用の文字列を入れるとmetaのtitleとか意味不明になるので、#header内のタイトルは直接htmlに文字列を書きます。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <script type="text/template" id="tmpl-header"><% if (memories_cnt > 0) { %> <a href="#" id="memories">uuq# d+)d+) 6o6o6oーz!!</a> <% // ここと %> <div id="wrap-memories"> <% for (var i=0; i < memories_cnt; i++) { %> <a class="memory-<%- i+1 %>" href="<%- memories[i].file_path %>" data-rel="lightcase:memories:slideshow" title="<%- memories[i].title %>"> <%- memories[i].title %> </a> <% } %> </div><% } else { %> uuq# d+)d+) 6o6o6oーz!! <% // ここ %><% } %></script> |
翻訳 (こちらを参考に)
- uuq#
- メメタァ
- d+)d+)
- ジョジョ
- この部分を相手の名前が出るように上手いこと修正するとよいです
- 6o6o6oーz!!
- オラオラオラーッ!!
ローディング部分
modelで定義した文字列を表示してジョジョフォントを適用させます。
01 02 03 04 05 06 07 08 09 10 11 | <div class="wrap-overlay-message"> <div class="overlay-message"> <div class="overlay<% if (jojo !== '') { %> jojo<% } %>"> <% if (jojo !== '') { %> <%- jojo %> <% } else { %> <i class="fa fa-spinner fa-pulse"></i> <% } %> </div> </div></div> |
yosegakkyの読み込み修正
ジョジョ風味を出すために、jojo_effectをtrueにします。
ついでに余韻を残すために描画時間を少し長くします。
1 2 3 4 5 | var config = { "title": "yosegakky ジョジョ風味", "interval_render_message": 500, // 少し描画時間を長くする "jojo_effect": true}; |
差分(git diff)はこんな感じ
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | diff --git a/index.html b/index.htmlindex b0945ad..fce6ea1 100755--- a/index.html+++ b/index.html@@ -39,7 +39,7 @@ <script type="text/template" id="tmpl-header"> <% if (memories_cnt > 0) { %>- <a href="#" id="memories"><%- title %></a>+ <a href="#" id="memories">uuq# d+)d+) 6o6o6oーz!!</a> <div id="wrap-memories"> <% for (var i=0; i < memories_cnt; i++) { %> <a class="memory-<%- i+1 %>" href="<%- memories[i].file_path %>" data-rel="lightcase:memories:slideshow" title="<%- memories[i].title %>">@@ -48,7 +48,7 @@ <% } %> </div> <% } else { %>- <%- title %>+ uuq# d+)d+) 6o6o6oーz!! <% } %> </script>@@ -79,8 +79,12 @@ </div> <div class="wrap-overlay-message"> <div class="overlay-message">- <div class="overlay">+ <div class="overlay<% if (jojo !== '') { %> jojo<% } %>">+ <% if (jojo !== '') { %>+ <%- jojo %>+ <% } else { %> <i class="fa fa-spinner fa-pulse"></i>+ <% } %> </div> </div> </div>@@ -111,7 +115,11 @@ 'use strict'; // @see assets/js/yosegakky/config/config.js- var config = {};+ var config = {+ "title": "yosegakky ジョジョ風味",+ "interval_render_message": 500,+ "jojo_effect": true+ }; // e.g. [{"userName": "hoge", "message": "hoge<br>piyo", "img": "dummy.jpg", "video": "dummy.mp4"}, {...}] var messages = []; |
まとめ
こんな感じです。
ジョジョフォントを使うだけでジョジョ風味を簡単に醸し出せるので、ジョジョ好きな方はジョジョフォントお薦めです。
