カスタムフィールドグループのデータをCSVインポートする

弊社アップルップルの学生インターンの課題として、a-blog cms のカスタムフィールドグループ の値を CSV でインポートする機能 があり、 a-blog cms LIVE Vol.01 でインターンの @ryoseiyamano に発表して頂きました。

a-blog cms LIVEでもご紹介させていただきましたが、実装方法をこの記事でご案内いたします。

ダウンロード方法

作られたものは github の https://github.com/appleple/cfg-csv に公開されています。以下のボタンから一式をダウンロードすることができます。

ダウンロード

src フォルダ内のファイルの説明



csvImport.js CSVインポート用の JavaScript
csvDownload.js CSVダウンロード用の JavaScript
csvImport.css 追加ボタンの横にボタンのみ表示させるためのCSS

設置方法

設置場所は自由ですが、field.html と同じディレクトリであれば以下のように書くだけで「CSVアップロード」ボタンが表示されるようになります。

インポートだけではなくCSVをダウンロードする機能も必要であれば、合わせて csvDownload.js も読み込んでください。

<script src="csvImport.js"></script>
<link rel="stylesheet" href="csvImport.css">

CSVアップロードボタンが表示された様子

利用方法

  1. アップロードするCSV ファイルを用意してください。データは、 1行目にカスタムフィールドの name をカンマ区切りで設定し、2行目以降は1行目に対応するデータを記入してください。
  2. CSVアップロードボタンから、作成したCSVファイルを選択してアップロードしてください。

同じタグ付けがされている記事