【後日談】雇用契約書ジェネレータ と はてなブログ上でのプログラムで困ったこと＆解決方法
先日、愛猫や愛犬との雇用契約書 を作れるページを作りました。
今日は、使わせていただいたものの紹介 と 困ったこと についてです。
はてなブログ上で作ろうとして、たくさん躓きました…
まずは、記事の前に、にゃんこ 成分をチャージしてください (｡･-･｡)
書き終わるのを待つ、チョコさん ٩(•ᴗ• ٩)
背景
購読させていただいている green3lk さんのブログの記事を読んで、「やってみたい！」と思ったからです。
green3lk さん と 創作欲を引き出す魅力的な記事 に 感謝 (⁎˃ᴗ˂⁎)
追記：はてなブログでやろうと思ったのは、不自由が成長と創造性を...、いえ、違いました、なんとなくです ( ˙꒳˙ )
使わせていただいたもの
html2canvas
JavaScriptのライブラリです。
説明を公式から引用。
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
きっと簡単にいえば、htmlをcanvasに変えられると書いてあります（白目）
肉球のアイコン
モノトーンさんのアイコンです。
モノトーンさんは商用利用可能なアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。
ふい字
かわいいフォントです。
もじまる
水玉模様の画像が作れるジェネレーターです。
困ったこと ＆ どうやって解決したか
いつも使っている node の環境が使えない
どうにもなりませんでした…↷( ó╻ò)
記事単位でStyleタグが使えない
はてなブログでは、記事にstyleタグを書いても無視されているようでした…↷( ó╻ò)
共通では CSS が書けるのですが、この記事以外でも読み込んでしまうので、あまりよくありません。
今回は、HTMLのタグに直接style属性を書きました。
onclick属性、onchange属性が消される
はてなブログでは、HTMLの編集で onclick属性、onchange属性 を書いても、記事には反映されませんでした。
プレビューして、記事の編集画面に戻ると、消されています...↷( ó╻ò)
今回は、jQueryでイベントをbindしました。
Javascript側では、制限されていないようで、無事に動かせました。
画像のドメインが違うため、CORSに引っかかる
はてなブログの画像は、 はてなフォトライフ にあるものを読み込むため、ドメインが異なります。
そのため、 canvas の toDataURLメソッド などでは、CORSの制限に引っかかります...↷( ó╻ò)
今回は、画像を base64に変換して、直接埋め込みました。
imgタグのsrc属性、style属性内の background-image で使っています。
おわりに
先人の素晴らしい成果物を組み合わせただけで、私が何もしていないのがばれてしまう記事でした(´>∀<`*)
よかったら遊んでみてください ( ˙꒳˙ )
今日も、ありがとうございました ٩(ˊᗜˋ*)و
