「JSライブラリ「PhotoCollage.js」」と「CFG CSV Importer」についてまとめてみた

アップルップルのインターンで制作した「JSライブラリ「PhotoCollage.js」」と「CFG CSV Importer」についてまとめてみました。
a-blog cms zoom up 2022/4/12(火)で発表した内容です。

a-blog cms zoom up 2022/4/12のYouTube動画へ

PhotoCollage.jsのGitHubページへ

Transcript

1. 「photocollage.js」と「CFG CSV Importer」 有限会社アップルップル インターン 山野涼晴
2. アップルップルのインターン生(4か月) 山野涼晴 @RyoseiYamano ablog-cmsについては勉強中です 普段は名城大学理工学部所属の大学二年生
3. 制作したもの ・JSライブラリ「photocollage.js」 ・CFG CSV Importer
4. JSライブラリ「photocollage.js」 制作したものその1
5. 機能について 画像投稿をする際に、一度の投稿に含まれる画像の 縦横比や画像の枚数によって画像の表示方法を決め てくれるという機能。
6. デモ 概要欄に掲載されているYouTubeのURLからご覧ください。
7. 最初の画像が縦長で枚数が2枚▶ 最初の画像が横長で枚数が2枚▶ 二枚の画像を投稿する場合
8. 1枚目：横、枚数：2枚 1枚目：縦、枚数：2枚 1枚目：横、枚数：3枚 枚数：5枚 1枚目：横、枚数：4枚 1枚目：縦、枚数：3枚 画像レイアウト例
9. 導入する方法
10. 手順①PhotoCollageをダウンロードする https://github.com/appleple/PhotoCollage
11. 手順②テンプレートを設置して読み込む ダウンロードしてきたPhotoCollageを使用したいフォルダ内に 設置して、使用するHTMLファイルのhead要素内にJavaScript ファイルとCSSファイルの読み込みを記述する。
12. 手順③使用階層の親要素にjs-photocollageクラスを付与 imgタグを含む使用したい階層の親要素にjs-photocollageという クラスを付与。使用したい階層のimgタグには、width属性と height属性をつけておいてください。
13. 手順④headタグ内にscriptタグを記述 クラスjs-photocollageがついた階層に対しての処理を行うため に、head要素内に以下のようなscript要素を記述をしてください。
14. 注意事項
15. ユニットグループの解除 テキストなどの画像以外のユニットに対して、photocollageとい うユニットグループが適用されないように、違うグループをつけ てグループ分けをして下さい。 ablog-cmsで使用する場合
16. 階層内に元々あった属性はリセットされる 指定された階層は、新しい階層に作り直される仕組みになってい るので、階層内で元々指定していた属性は消えてしまう。
17. 階層内に元々あった属性を残す場合 headタグ内に記述したscriptの記述を編集して、imgタグにクラ スを追加してください。
18. その他のオプション
19. まとめ • PhotoCollage.jsとは、アルバム投稿の際に役立つ機能として使 うことが出来ます • Githubのappleple/PhotoCollageに配布してあるコードを使っ て導入を行うことが可能です • 指定した階層に元々指定していた属性は消えてしまうので、 script要素の中で設定して追加してください
20. CFG CSV Importer 制作したものその2 CFG（カスタムフィールドグループ）CSV Importer
21. どんなことが可能になるのか フォームに大量のデータ入力が可能になる
22. デモ 概要欄に掲載されているYouTubeのURLからご覧ください。
23. まとめ • カスタムフィールドを適用したい場所にJavaScriptファイルと CSSファイルの読み込みを記述してください。 • 管理画面＞ダッシュボード＞キャッシュをクリアを押す • CSVダウンロードでファイルに書き込むデータの形式を確認す る。 • CSVファイルを指定して、データを入力する。
24. 最後に
25. 参考リンク appleple/PhotoCollage https://github.com/appleple/PhotoCollage CFG CSV Importerは後日配布予定です
26. ご清聴ありがとうございました！ ＠RyoseiYamano