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