Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daru
December 21, 2017

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

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

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

Daru

December 21, 2017
Tweet

More Decks by Daru

Other Decks in Programming

Transcript

  1. プロ生ちゃん
    プロ生ちゃん
    Advent Calendar 2017
    21日目の記事です
    投稿内容:
    投稿内容:
    MadoRemix
    MadoRemix 一言コメント表示機能
    一言コメント表示機能 で

    躓いたこと
    躓いたこと
    written by Daru
    見てもらえる
    のかなぁ?

    View Slide

  2. ども、 (^-^)/
    ども、 (^-^)/

    に初参加中の
    Daru
    Daruです
    です
    MadoRemix
    マスコットアプリ文化祭
    どこぞの
    樽のような
    ひとですね〜

    View Slide


  3. 参加・投稿はしてみたいけどネタは… (~へ~;)う-ん
    プロ生ちゃん関係がいいよねぇ…
    プロ生ちゃん関係がいいよねぇ…
    とは言うものの、ブログはやってないんだよねぇ…
    とは言うものの、ブログはやってないんだよねぇ…
    Advent Calendar
    なんてったって
    プロ生ちゃん
    Advent Calendar
    なんですからね!

    View Slide

  4. そうだ、
    そうだ、 の

    マスコット(
    マスコット( )
    )
    一言コメント表示機能
    一言コメント表示機能で

    躓いたことを書いてみよう!
    躓いたことを書いてみよう!
    それも、MadoRemixを使って (゜゜;)\(--;)ぉぃぉぃ
    それも、MadoRemixを使って (゜゜;)\(--;)ぉぃぉぃ
    MadoRemix
    MadoRemix
    プロ生ちゃん
    プロ生ちゃん
    スーパーハカーは
    躓きまくって
    いますよね〜

    View Slide

  5. 早速ですが、初期のマスコット召喚の様子です
    早速ですが、初期のマスコット召喚の様子です
    (-o-)/
    (-o-)/ 自分、
    自分、Chrome OS
    Chrome OS に足りないのは
    に足りないのは萌え
    萌えだと思うんですよ!
    だと思うんですよ!
    なんのひねりもなく、影響のなさそうな要素レイヤーのbackground-imageとして配置
    手抜き
    したでしょう
    Ν

    View Slide

  6. うんうん(^-^) 萌の召喚は大事だよねぇ〜 (自己満足)
    せっかくだし、マスコットアプリ文化祭に参加しようと思うんだけど…
    召喚だけじゃぁひねりがないよなぁ… (☆Д☆) ティキーン!!
    何か
    閃いたの?

    View Slide

  7. 見せてもらおうか、プロ生ちゃんの
    見せてもらおうか、プロ生ちゃんの
    ツッコミ
    ツッコミの性能とやらを!
    の性能とやらを!
    これ…
    ツッコまなきゃ
    いけないの…Β

    View Slide

  8. 一言コメント(と書いてツッコミと読む)機能追加
    一言コメント(と書いてツッコミと読む)機能追加
    各sectごとの内容を反映させるためにsectと同階層で、かつsectの前に要素配置
    ツッコミは
    おいといて…
    なぜ
    そうなるの?

    View Slide

  9. なぜこうなったのか
    なぜこうなったのか
    revealのメインhtmlにMarkdown.mdを注入している関係で
    section内に要素が追記できなかった
    (html側でなくscript側で対応すればできるけどこの時点ではめんどくさかったw)
    (html側でなくscript側で対応すればできるけどこの時点ではめんどくさかったw)
    revealはスライドの遷移時に色々と表現エフェクトがあるので
    吹き出し要素の固定が必要だった
    sectionごとに一言の内容が異なるので、吹き出しのサイズは可変長に
    対応できなければならなかった
    吹き出しの表示に少し遅延をかけることで、
    より一層キャラがツッコミ発言している感じに見せたかったw
    いろいろと
    考えてはいるんだね

    View Slide

  10. もう少し詳細な図示をすると 次のようになります
    1…2…3…
    1…2…3… ’
    ’
    パクって
    ないですか〜?

    View Slide

  11. 通常時の配置状態
    通常時の配置状態
    発言っぽく
    見せるために
    吹き出し高さは
    口元が
    基準なんだね!

    View Slide

  12. ページ遷移時の状態
    ページ遷移時の状態
    revealのslidechangedイベントで吹き出しの切り替えをしてます
    引きずられないぞ〜

    View Slide

  13. ときはながれて…
    ときはながれて…
    そろそろPDF出力したいなぁ〜♪
    そろそろPDF出力したいなぁ〜♪
    ChromeのPrint機能があるしぃ〜♪
    ChromeのPrint機能があるしぃ〜♪
    cssいじればなんとかなるしぃ〜♪
    cssいじればなんとかなるしぃ〜♪
    まゆしぃ〜♪
    トゥットゥル~♪

    View Slide

  14. なんとかならなかった… orz
    なんとかならなかった… orz
    やっぱり
    スーパーハカーだねぇ…

    View Slide

  15. revealのPDF出力をハックせねば…
    revealのPDF出力をハックせねば…
    (‵・ω・´)キリッ
    (‵・ω・´)キリッ
    そんな技術力
    ないでしょうにw

    View Slide

  16. 結果、わかったこと
    結果、わかったこと
    その他、タイミング等
    諸々の課題が
    あったみたいよ΀

    View Slide

  17. 悩んだ時間はなかったことにしてw
    出来上がったのがこちら
    1…2…3…
    1…2…3… ’
    ’
    マジ天丼!

    View Slide

  18. 修正の概要
    修正の概要
    目的の
    プロパティ
    名を探すのが
    一番
    面倒だった
    みたいよw

    View Slide

  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イベントでは希望どおりの発火をしなかった…)
    泣き言は
    言っちゃ
    ダメよȶ

    View Slide

  20. 更に襲い来る魔の手が!
    更に襲い来る魔の手が!
    このプレゼンをPDF出力する段階で新たなBugに遭遇… orz
    Print時に吹き出しのフォント設定が反映されない…
    (場合によっては吹き出しの文字自体が表示されない)
    試行錯誤の結果、暫定処置を見いだせた ( ´Д`)=3はぁ
    本文の中で一度でも上記のようにstyleでSetoFontSP指定を入れると
    Print時にFontが正常Loadされるようだ??
    Chrome側のBugなのか??
    暫定処置Mk.2: 勘で、fontには関係ないはずだが
    htmlに静的に記述していて確実にLoadされそうな
    マスコット用のimg要素にfont-family:'SetoFontSP'を
    記述してみたら、この問題がとりあえず回避できた
    動的追加要素に関する扱いをもう少し調べてみないと…( ´ー`)フゥー...

    まだまだ
    修行が
    足りないわね!

    View Slide

  21. 一難去ってまた一難、
    一難去ってまた一難、
    俺たちの戦いはこれからだ!
    俺たちの戦いはこれからだ!
    Daru先生の次回作にご期待下さい…w
    Daru先生の次回作にご期待下さい…w
    エタるんですか!
    ( ゜_゜;)

    View Slide

  22. 初めての投稿で拙い内容ですが
    初めての投稿で拙い内容ですが
    ご視聴ありがとうございました (^^)
    ご視聴ありがとうございました (^^)
    Draw.ioでちまちま図を書いてしまって、結局、手抜き出来てなかったですw by Daru
    Draw.ioでちまちま図を書いてしまって、結局、手抜き出来てなかったですw by Daru
    おそまつさまでした♡

    View Slide