ファイルをアップロードする

ファイルをアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

ファイルをアップロードするカスタムフィールドの作成

例)PDFファイルをアップロードするカスタムフィールド(フィールド名:pdffile)

<!-- BEGIN pdffile@path:veil -->
<input type="hidden" name="pdffile@old" value="{pdffile@path}" />
<input type="hidden" name="pdffile@secret" value="{pdffile@secret}" />
<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />
<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

<label for="input-checkbox-pdffile@edit">
<input type="checkbox" name="pdffile@edit" value="delete" id="input-checkbox-pdffile@edit" /> 削除
</label>
<a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="zip" /></a><!-- END pdffile@path:veil -->
<input type="file" name="pdffile" />
<input type="hidden" name="field[]" value="pdffile" />
<input type="hidden" name="pdffile:extension" value="file" />
<input type="hidden" name="pdffile@extension" value="pdf" />
<input type="hidden" name="pdffile@filename" value="pdf/example.pdf" />

各記述の説明

2行目:ファイルがアップロードされなかった場合に既存のアップロードされているファイルの情報を送信する記述【必須】

<input type="hidden" name="フィールド名@old" value="{フィールド名@path}" />

4行目:システムのファイル名を表示するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />

5行目:ファイルサイズを自動で取得するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

7〜9行目:アップロードしてあるファイルを削除する記述【任意】

<label for="input-checkbox-フィールド名@edit">
<input type="checkbox" name="フィールド名@edit" value="delete" id="input-checkbox-フィールド名@edit" /> 削除
</label>

10行目:アップロードしたファイルのアイコンとリンク表示【必須】

<a href="%{HTTP_ARCHIVES_DIR}{フィールド名@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a>

11行目:ファイルを入力する記述【必須】

<input type="file" name="フィールド名" />

12行目:カスタムフィールドであることの記述【必須】

<input type="hidden" name="field[]" value="フィールド名" />

13行目:通常のフィールドではなく、拡張フィールドであることの記述【必須】

<input type="hidden" name="フィールド名:extension" value="file" />

14行目:アップロードするファイルの拡張子を指定【任意】

value属性に拡張子を記述します。ここで指定した種類のファイルのみアップロードできます。拡張子は1つのみ指定可能です。
指定していない場合はコンフィグの設定が適用されます。

<input type="hidden" name="フィールド名@extension" value="pdf" />
拡張子を複数指定したい

拡張子を複数指定してユーザーに入力のヒントを提示したい場合は、HTMLのaccept属性を使用することを推奨しています。

以下の例では、.pdf、.docx、.docの拡張子を許可しています。ユーザーは指定された拡張子のファイルのみ選択できるようになります。 <input type="file" name="フィールド名" accept=".pdf,.docx,.doc" />

15行目:アップロードする場所とファイル名を指定【任意】

カスタムフィールドからアップロードされたファイルは、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)※@filenameは@baseNameと違い、ファイル名を指定することができます。

<input type="hidden" name="フィールド名@filename" value="アップロードするファイルのパス" />

PDFファイルをアップロードしたカスタムフィールド

PDFファイルをアップロードしたカスタムフィールド


ファイル名をランダムにするには

valueの値を空欄にすることでランダムになります

<input type="hidden" name="pdffile@filename" value="" />
ファイル名をアップロードされたファイル名のままにするには

valueの値を"@rawfilename"にすることでそのままになります

<input type="hidden" name="pdffile@filename" value="@rawfilename" />

カスタムフィールドでアップロードしたファイルを表示

例)「pdffile」というフィールド名でPDFファイルをアップロードした場合

<!-- BEGIN pdffile:veil --><a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a><!-- END pdffile:veil -->

PDFファイルの表示

PDFファイルの表示

画像をアップロードする

画像をアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

画像をアップロードするカスタムフィールドの作成

例)PNGファイルをアップロードするカスタムフィールド(フィールド名:topVisual)

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />

各記述の説明

3行目:アップロードした画像の表示【必須】

標準サイズ:normal / 画像(小):tiny / 画像(大):large 正方形サイズ(v.1.5.0より追加):square / 画像(正方形)

例)各画像サイズの記述例

<!-- BEGIN フィールド名@normal:veil --><img src="%{ARCHIVES_DIR}{フィールド名@path}" width="{フィールド名@x}" height="{フィールド名@y}" alt="{フィールド名@alt}" /><!-- END フィールド名@normal:veil --><br />
<!-- BEGIN フィールド名@tiny:veil --><img src="%{ARCHIVES_DIR}{フィールド名@tinyPath}" width="{フィールド名@tinyX}" height="{フィールド名@tinyY}" alt="{フィールド名@tinyAlt}" /><!-- END フィールド名@tiny:veil --><br />
<!-- BEGIN フィールド名@large:veil --><img src="%{ARCHIVES_DIR}{フィールド名@largePath}" width="{フィールド名@largeX}" height="{フィールド名@largeY}" alt="{フィールド名@largeAlt}" /><!-- END フィールド名@large:veil --><br />
<!-- BEGIN フィールド名@square:veil --><img src="%{ARCHIVES_DIR}{フィールド名@squarePath}" width="{フィールド名@squareX}" height="{フィールド名@squareY}" alt="{フィールド名@squareAlt}" /><!-- END フィールド名@square:veil --><br />

4行目:画像がアップロードされなかった場合に既存のアップロードされている画像の情報を送信する記述【必須】

<input type="hidden" name="フィールド名@old" value="{フィールド名@path}" />

6〜9行目:アップロードしてある画像を削除する記述【任意】

<label for="input-checkbox-フィールド名@edit">
<input type="checkbox" name="フィールド名@edit" value="delete" id="input-checkbox-フィールド名@edit" /> 削除
</label>

11行目:ファイルを入力する記述【必須】

<input type="file" name="フィールド名" />

12行目:画像のカスタムフィールドであることの記述【必須】

<input type="hidden" name="field[]" value="フィールド名" />

13行目:通常のフィールドではなく、拡張フィールドであることの記述【必須】

<input type="hidden" name="フィールド名:extension" value="image" />

14行目:altの指定【任意】

<input type="text" name="フィールド名@alt" value="{フィールド名@alt}" />

15行目:アップロードする画像の拡張子を指定【任意】

拡張子を指定し、画像の形式も自働的に変換されます。

<input type="hidden" name="フィールド名@extension" value="拡張子" />

16行目:アップロードする場所とファイル名を指定【任意】

カスタムフィールドからアップロードされた画像は、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)

<input type="hidden" name="フィールド名@filename" value="アップロードする画像のパス" />

17行目:アップロードする画像の大きさを指定【任意】

幅(width)と高さ(height)を指定します。幅と高さどちらかを指定すると指定した大きさを元に縦横比に合わせて画像がリサイズされます。「size」は画像の長辺を指定します。

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />

画像(小)と(大)と(正方形)の大きさを指定することもできます。指定した場合にのみ、画像(小)と(大)と(正方形)の画像が作成されます。 ※正方形画像はv.1.5.0から使用できる機能です。

画像(小)の場合
tinyWidth, tinyHeight, tinySize
画像(大)の場合
largeWidth, largeHeight, largeSize
画像(正方形)の場合
squareWidth, squareHeight, squareSize

例)各画像サイズの記述例

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />
<input type="hidden" name="フィールド名@tinyWidth" value="画像(小)の幅の数値" />
<input type="hidden" name="フィールド名@tinyHeight" value="画像(小)の高さの数値" />
<input type="hidden" name="フィールド名@tinySize" value="画像(小)の長辺の数値" />
<input type="hidden" name="フィールド名@largeWidth" value="画像(大)の幅の数値" />
<input type="hidden" name="フィールド名@largeHeight" value="画像(大)の高さの数値" />
<input type="hidden" name="フィールド名@largeSize" value="画像(大)の長辺の数値" />
<input type="hidden" name="フィールド名@squareWidth" value="画像(正方形)の幅の数値" />
<input type="hidden" name="フィールド名@squareHeight" value="画像(正方形)の高さの数値" />
<input type="hidden" name="フィールド名@squareSize" value="画像(正方形)の長辺の数値" />

※Widthでは横の長さを、Heightでは縦の長さを、Sizeでは長辺を基準にして指定することができます。

a-blog cms を使ってみたいけど、なにから始めたらいいの?

a-blog cmsを使ってみたい!でもなにから始めたらいいの?効率的な始め方と基礎的な機能

このコンテンツは、a-blog cms(エーブログ シーエムエス)を使ってみたいけどまずは何をしたらいいかわからない人に向けて、効率の良い学び方や基礎的な機能についてまとめた記事です。くわしい実装方法や使い方などは紹介しているリンク先の記事をご覧ください。

目次

a-blog cms を利用できる環境を用意する

まずは a-blog cms を利用できる環境を用意しましょう。a-blog cms を使うためには、基本的にはご自身のローカル環境や本番環境のサーバーに、a-blog cms をインストールする必要があります。でも、もっと手軽に a-blog cms を利用できる方法も現在2つあります。

  • デモサイト(サンプルサイト)にログインして操作してみる
  • ablogcms.io でお試し利用する(30日間無料でテスト環境を利用できます)

順番に説明していきます。デモサイト(サンプルサイト)では、ブラウザから行える作業(のみ)が体験できます。登録データは、他の方もログインできるため共用となり、定期的にリセットされますのでご注意ください。

デモサイト(サンプルサイト)のログイン情報


サンプルサイトURL https://demo.a-blogcms.jp/
ログインURL https://demo.a-blogcms.jp/login/
ID demo
Password pass

ablogcms.io でお試し利用する

ablogcms.io は、ご自身専用のテスト環境を30日間無料で使えるというサービスです。ブラウザから行える作業以外にもSFTP情報が支給されるため、自由にカスタマイズ可能です。必要なのはメールアドレスだけ。ご自身の専用環境となるため、登録データは共用ではありません。
但しお試し用の環境となりますので、サーバー内のファイルや登録データは登録から30日で削除されてしまいますのでご注意ください。( ablogcms.io で構築したものを、本番環境用にエクスポートすることもできます)


本番環境で運用する場合は、サーバーに a-blog cms をインストールする必要があります。詳しくは以下をご覧ください。「簡単セットアップ」を利用したインストール方法が簡単でおすすめです。



CMSにログインして記事を書く

a-blog cms を自由に触れる環境ができたら、ログインしてみましょう。a-blog cms をインストールしたサイトのURLの末尾に「/login/」とつけてブラウザからアクセスするとログインページが表示されます。

ログインできたら、コンテンツ(記事)を新規で作成するか、既存の記事を編集してみましょう。a-blog cms では記事のことを「エントリー」と呼んでいます。固定ページや投稿ページといった区別はありません。詳しいエントリーの書き方は以下の記事をご覧ください。


テーマとテンプレート

こちらは a-blog cms の公式テーマの詳細や、テーマの設定方法などが学べる記事です。どんなテーマがあるのか目を通しておくといいでしょう。


テーマとテンプレートでは、どこに書いたら意図したものが表示されるのか、実際に確認しながら進めることをおすすめします。

まずは「テーマとテンプレートの構成」の記事で構成をなんとなく把握してください。実践したい場合は「表示テンプレートの確認」の見出しを参考に、テンプレートに実際に何か書いてみることがおすすめです。


公式テーマのHTMLを開いてみると、英語でHTMLのコメントタグのようなものや「@」からはじまるコードがたくさん書かれていますが、この記述が a-blog cms ではプログラムが動作する箇所になります。各記述方法を知りたい場合は以下の記事をご覧ください。


モジュール

a-blog cms に登録したデータを表示する機能がモジュールです。

以下の記事を見ると、モジュールにはたくさんの種類があることがわかります。モジュールの機能でできることが大体把握できると思います。


ビルトインモジュールを使っているうちに、ビルトインモジュールで登録データの条件設定のしかたについて疑問を持つ方が多いですが、その場合にはモジュールIDを作成してください。モジュールIDを作成することで、複数の条件設定が可能になります。

実際にサイトを制作するときには、基本的には毎度モジュールIDを作成して使うことになります。


カスタムフィールド

カスタムフィールドとは、エントリーや、カテゴリー、ブログ、ユーザーに対して独自のデータを追加することができる機能です。まずはこちらの記事をご覧いただくと概要が把握できると思います。


学習の流れとしては、まずは「カスタムフィールドの基本」の記事でだいたいどんなソースコードで構成されているかを把握して、「カスタムフィールドメーカー」でソースコードを作り、次は記述場所を把握するために「ブログのカスタムフィールド」の記事を参考にするのがいいと思います。



前述した通り、a-blog cms にはカスタムフィールドの種類が5つありますが、ブログのカスタムフィールドを作成する方法をここでは紹介しておきます。以下の記事をご覧ください。他の4つのカスタムフィールドを作る際はテンプレートを設置するディレクトリが変わりますので、それぞれの記事をご覧ください。


フォーム

サイトにフォームを作る際は以下の記事を参考にしてください。


たくさんソースコードがあるので、全て覚えるのは大変だと思います。公式テーマでは Blogテーマ以外はお問い合わせフォームの仕組みを持っていますので、ソースコードをコピー&ペーストして要素を追加したり削除して、少しずつデザインに近づけていくことをおすすめします。

なお、フォームはカスタムフィールドと同じソースコードです。カスタムフィールド メーカーを活用して制作してください。

他にも、フォーム機能と連動してGoogleスプレッドシートSlackReCaptcha などの外部機能と連携することができる「拡張アプリ」という機能があります。こちらは基礎的な内容ではありませんが、こういった機能も知っていると提案の幅が広げることができるため、紹介しておきます。


基礎的な機能については以上となります。これまでに紹介した機能で小さなコーポレートサイトなら作ることができますので、まずはこれらの機能を使ってみることがおすすめです。

そのほかの機能

マルチサイトは管理画面から「ブログ管理」のページで子ブログを作成することで作れますし、パスワード制限をかけたサイト(例:会員制サイト)もブログのステータスを「シークレット」にするだけで作れます。

その他にも、レスポンシブWebデザインではなく、PCとスマホのデザインを変更するときにはルールという機能が必要です。


運営者がウェブサイトのレイアウトを自由に変更したいという特殊な要望があれば、レイアウト機能という機能も用意しています。


他にもたくさん機能がある a-blog cms ですが、まずはこの記事に書いてある機能を把握することが第一歩です。たくさん記事を紹介しましたが、ご自身の理解度に合わせて必要な項目をチェックしてみてください。

初心者向けのハンズオンコンテンツ

他にも、静的サイトから動的サイトを作っていくハンズオンコンテンツもあります。初心者の方はこちらを学習すると理解が深まると思います。


わからない時は

記事を読んでもよくわからない。インストールでつまづいてしまい先に進めない…。そんなときは、お気軽にフォーラムで質問してください。

また、定期的に開催している勉強会に参加していただくと、何でもご質問いただけますし、a-blog cms についての理解も深まります。オンラインでも各地でも定期的に開催していますので、是非参加してみてください。(◯◯編 となっていても、初心者の方もいつでもご参加いただけます。)

お急ぎの場合や、より詳細なサポートをご希望の場合は、公式サポートをご検討ください。ベースキャンプ名古屋での対面サポートやオンラインビデオ通話サポートなどを行っております。