MadoRemix マスコット一言コメント表示機能で躓いたこと

プロ生ちゃんAdvent Calendar 2017 21日目の投稿記事です
MadoRemixのマスコット一言コメント表示機能で躓いたことを書いてみたものです

Chrome OS Chrome App
Chromebook Chromebox
開発 自作 コーディング Javascript
マークダウン エディタ Markdown Editor reveal.js

Transcript

1. プロ生ちゃん プロ生ちゃん Advent Calendar 2017 21日目の記事です 投稿内容： 投稿内容： MadoRemix MadoRemix 一言コメント表示機能 一言コメント表示機能 で で 躓いたこと 躓いたこと written by Daru 見てもらえる のかなぁ？
2. ども、 (^-^)/ ども、 (^-^)/ で に初参加中の Daru Daruです です MadoRemix マスコットアプリ文化祭 どこぞの 樽のような ひとですね〜
3. も 参加・投稿はしてみたいけどネタは… (~へ~;)う-ん プロ生ちゃん関係がいいよねぇ… プロ生ちゃん関係がいいよねぇ… とは言うものの、ブログはやってないんだよねぇ… とは言うものの、ブログはやってないんだよねぇ… Advent Calendar なんてったって プロ生ちゃん Advent Calendar なんですからね！
4. そうだ、 そうだ、 の の マスコット( マスコット( ) ) 一言コメント表示機能 一言コメント表示機能で で 躓いたことを書いてみよう！ 躓いたことを書いてみよう！ それも、MadoRemixを使って (゜゜;)＼(--;)ぉぃぉぃ それも、MadoRemixを使って (゜゜;)＼(--;)ぉぃぉぃ MadoRemix MadoRemix プロ生ちゃん プロ生ちゃん ｽｰﾊﾟｰﾊｶｰは 躓きまくって いますよね〜
5. 早速ですが、初期のマスコット召喚の様子です 早速ですが、初期のマスコット召喚の様子です (-o-)/ (-o-)/ 自分、 自分、Chrome OS Chrome OS に足りないのは に足りないのは萌え 萌えだと思うんですよ！ だと思うんですよ！ なんのひねりもなく、影響のなさそうな要素レイヤーのbackground-imageとして配置 手抜き したでしょう Ν
6. うんうん(^-^) 萌の召喚は大事だよねぇ〜 (自己満足) せっかくだし、マスコットアプリ文化祭に参加しようと思うんだけど… 召喚だけじゃぁひねりがないよなぁ… (☆Д☆) ﾃｨｷｰﾝ!! 何か 閃いたの？
7. 見せてもらおうか、プロ生ちゃんの 見せてもらおうか、プロ生ちゃんの ツッコミ ツッコミの性能とやらを！ の性能とやらを！ これ… ツッコまなきゃ いけないの…Β
8. 一言コメント(と書いてツッコミと読む)機能追加 一言コメント(と書いてツッコミと読む)機能追加 各sectごとの内容を反映させるためにsectと同階層で、かつsectの前に要素配置 ツッコミは おいといて… なぜ そうなるの？
9. なぜこうなったのか なぜこうなったのか revealのメインhtmlにMarkdown.mdを注入している関係で section内に要素が追記できなかった (html側でなくscript側で対応すればできるけどこの時点ではめんどくさかったｗ) (html側でなくscript側で対応すればできるけどこの時点ではめんどくさかったｗ) revealはスライドの遷移時に色々と表現エフェクトがあるので 吹き出し要素の固定が必要だった sectionごとに一言の内容が異なるので、吹き出しのサイズは可変長に 対応できなければならなかった 吹き出しの表示に少し遅延をかけることで、 より一層キャラがツッコミ発言している感じに見せたかったｗ いろいろと 考えてはいるんだね
10. もう少し詳細な図示をすると 次のようになります １…２…３… １…２…３… ’ ’ パクって ないですか〜？
11. 通常時の配置状態 通常時の配置状態 発言っぽく 見せるために 吹き出し高さは 口元が 基準なんだね！
12. ページ遷移時の状態 ページ遷移時の状態 revealのslidechangedイベントで吹き出しの切り替えをしてます 引きずられないぞ〜
13. ときはながれて… ときはながれて… そろそろPDF出力したいなぁ〜♪ そろそろPDF出力したいなぁ〜♪ ChromeのPrint機能があるしぃ〜♪ ChromeのPrint機能があるしぃ〜♪ cssいじればなんとかなるしぃ〜♪ cssいじればなんとかなるしぃ〜♪ まゆしぃ〜♪ トゥットゥル～♪
14. なんとかならなかった… orz なんとかならなかった… orz やっぱり ｽｰﾊﾟｰﾊｶｰだねぇ…
15. revealのPDF出力をハックせねば… revealのPDF出力をハックせねば… (‵・ω・´)ｷﾘｯ (‵・ω・´)ｷﾘｯ そんな技術力 ないでしょうにｗ
16. 結果、わかったこと 結果、わかったこと その他、タイミング等 諸々の課題が あったみたいよ΀
17. 悩んだ時間はなかったことにしてｗ 出来上がったのがこちら １…２…３… １…２…３… ’ ’ マジ天丼！
18. 修正の概要 修正の概要 目的の プロパティ 名を探すのが 一番 面倒だった みたいよｗ
19. その他 その他 Slide側(reveal)を立ち上げてる時にはPrint表示モードで 立ち上げ直さないといけないのでEditor側からwindowIDを指定して リモートclose処理追加 revealのLoad及び表示完了した後にPrintダイアログを 出さないといけないのでrevealのreadyイベントで制御 Printダイアログを出す前に表示完了しないといけないので、 mediaQueryListでonbeforeprintイベント検出し、 吹き出し再描画をぶっ込み Print完了したら自動closeしたいので、 同じくmediaQueryListでonafterprintイベント検出 ただし、onafterprintイベントのみでcloseだとPrint完了前に closeしてしまったので回避策としてonmouseoverおよび onmouseoutイベント検出を組み合わせて使用 (onfocusイベントでは希望どおりの発火をしなかった…) 泣き言は 言っちゃ ダメよȶ
20. 更に襲い来る魔の手が！ 更に襲い来る魔の手が！ このプレゼンをPDF出力する段階で新たなBugに遭遇… orz Print時に吹き出しのフォント設定が反映されない… (場合によっては吹き出しの文字自体が表示されない) 試行錯誤の結果、暫定処置を見いだせた ( ´Д｀)=3はぁ 本文の中で一度でも上記のようにstyleでSetoFontSP指定を入れると Print時にFontが正常Loadされるようだ？？ Chrome側のBugなのか？？ 暫定処置Mk.2： 勘で、fontには関係ないはずだが htmlに静的に記述していて確実にLoadされそうな マスコット用のimg要素にfont-family:'SetoFontSP'を 記述してみたら、この問題がとりあえず回避できた 動的追加要素に関する扱いをもう少し調べてみないと…( ´ー｀)ﾌｩｰ．．． <span style="font-family:'SetoFontSP'"></span> まだまだ 修行が 足りないわね！
21. 一難去ってまた一難、 一難去ってまた一難、 俺たちの戦いはこれからだ！ 俺たちの戦いはこれからだ！ Daru先生の次回作にご期待下さい…ｗ Daru先生の次回作にご期待下さい…ｗ エタるんですか！ ( ゜_゜;)
22. 初めての投稿で拙い内容ですが 初めての投稿で拙い内容ですが ご視聴ありがとうございました (^^) ご視聴ありがとうございました (^^) Draw.ioでちまちま図を書いてしまって、結局、手抜き出来てなかったですｗ by Daru Draw.ioでちまちま図を書いてしまって、結局、手抜き出来てなかったですｗ by Daru おそまつさまでした♡