Yosegakkyにジョジョ風味を加えてみる

投稿日:

メメタァ

というわけで、GWが終わりますね。どう過ごされましたでしょうか。
僕は、おチビさん二人を引きずり回し(回され)ながらGWを過ごしました。

そんなどうでもいい事はさておいて、いきなりメメタァとわけの分からない言葉で始まりましたが、知っている人には当たり前？のフレーズですよね。

そうです、これは「ジョジョの奇妙な冒険」に出てくる有名な擬音語です。
メメタァとは (メメタァとは) [単語記事] – ニコニコ大百科
(僕は、ぶっちゃけ何を意味しているのか全くわかりません)

さて、なぜこんな事を書いたかというと先日書いたYosegakkyで送別した人がジョジョ好きだったんですね。
で、まぁ、普通のやつじゃあつまらないと、なんとかジョジョ風味を出したいと、いきり立ちまして少しジョジョ風味を出して披露してみましたよ。と、そんな事を少し書きます。

とりあえずこんなやつ作った

https://shimabox.net/labs/yosegakky_jojo/

特徴

  • ジョジョフォントをタイトルとローディング部分で使っている
    • それだけ
  • ジョジョフォントは以下2つを使っています
  • これらのフォントを使用する場合、各フォントの使用規約に注意してください

ジョジョフォント

まず、どうやってジョジョ風味を出すか。それはあまりジョジョを知らない僕でも簡単でした。
そう、あのフォントです。あのフォントを使った文字があればジョジョ風味が出るんでは無いかなと3秒で思いました。
それでググったところ上記のジョジョフォントに辿り着いたわけです。

全部をジョジョフォントにするのは少し難儀だし、わけわからんし、というわけでタイトルとローディング部分に適用することにしました。

修正方法

元のソースは https://github.com/shimabox/yosegakky です

assets/css/style.css の修正

上記のこちらを参考にフォントをダウンロードしておきます。
※例ではassets直下にfontディレクトリを作成してそこに配置しています

そして、ジョジョフォントを適用するために@font-face（ウェブフォント）を使います。

/** こんな感じで定義して */
@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)はこんな感じ

diff --git a/assets/css/style.css b/assets/css/style.css
index 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__.TTF
new file mode 100755
index 0000000..3334b6f
Binary files /dev/null and b/assets/font/BIZARG__.TTF differ

diff --git a/assets/font/JOJOMIX_.TTF b/assets/font/JOJOMIX_.TTF
new file mode 100755
index 0000000..bd8ea72
Binary files /dev/null and b/assets/font/JOJOMIX_.TTF differ

assets/js/yosegakky/config/config.js の修正

ジョジョ風味を出すか出さないかのフラグ用プロパティ(jojo_effect)を以下の様に定義しておきます。

Yosegakky.Config = {
  ・
  ・
  // @type {array} ヘッダーのタイトルクリック時に表示させるスライドショーの内容定義
  "memories": [
    // {"file_name": "", "title": ""}
  ],

  // @type {boolean} ジョジョエフェクトをかけるか
  "jojo_effect": false
};

差分(git diff)はこんな感じ

diff --git a/assets/js/yosegakky/config/config.js b/assets/js/yosegakky/config/config.js
index 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を少し修正します。
※ランダムな文字列を返して、それにジョジョフォントを適用させる寸法

// 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)はこんな感じ

diff --git a/assets/js/yosegakky/models/message.js b/assets/js/yosegakky/models/message.js
index 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に文字列を書きます。

<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で定義した文字列を表示してジョジョフォントを適用させます。

<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にします。
ついでに余韻を残すために描画時間を少し長くします。

var config = {
  "title": "yosegakky ジョジョ風味",
  "interval_render_message": 500, // 少し描画時間を長くする
  "jojo_effect": true
};

差分(git diff)はこんな感じ

diff --git a/index.html b/index.html
index 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 = [];

まとめ

こんな感じです。
ジョジョフォントを使うだけでジョジョ風味を簡単に醸し出せるので、ジョジョ好きな方はジョジョフォントお薦めです。

スポンサーリンク

作成者: shimabox

Web系のプログラマをやっています。 なるべく楽しく生きていきたい。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。