選択されているタグ : a-blogcms

動的フォームを使うときにやっておくといいカスタマイズ #ablogcms

こちらの記事は a-blog cms Advent Calendar 2017 の19日目の記事です。

普段使っているMacBook Proのディスプレイ中央部分に青い色ムラがあり、デザイン作業などでかなり気になるので先週、15日（金）アップルストア心斎橋に行って診てもらった。
ディスプレイ交換で1週間入院ということで、仕方なく預けて帰ってきたのだが、このAdvent Calendar の記事を書かなくてはいけないことを思い出した。

どうしよう....。

Facebookにそのことを書いた数時間後、夜中に鷹野さんから「予備機あるから使ってください」とメッセージが届き、Shiftの会場に持ってきてくださった。ほんと、鷹野さん超絶忙しい人なのに、いつも色々気にかけてくださって、周囲の人のことを細かくケアされてて、どんだけ優しいいい人なんだと思うのです。いつも感謝してます。ありがとうございます！

ということで、この記事を今、鷹野さんのMacで書いているわけです。

ただ、いくらUSキーボード同士で使いやすいようにがっつりカスタマイズしてあるMacだとしても、人のパソコンをいきなり使うことほど使いにくいものはない。一応「初期化しちゃっていいから...」と言ってくださってるとは言え、ブログの記事ひとつ書くのにMacを0からセットアップしてられない。（自分のMacは長くても1週間で戻ってくるのだし...）

そんな状況なので、細かい部分は割とアバウトな記事になっちゃってるかもしれませんがご容赦ください。

では、本題に入ります。

「動的フォームを使うときにやっておくといいカスタマイズ #ablogcms」の続きを読む

エントリーのOGP画像に任意のものをアップロードできるようにする方法

こちらの記事は a-blog cms Advent Calendar 2016 の19日目の記事です。

OGP画像って重要ですよね。
FacebookなどSNSでURLをシェアしたときに表示される画像です。あの画像の印象ひとつで、コンバージョンがずいぶん違います。
記事の内容に合った画像であるのはもちろんですが、もっと突っ込んで考えると、見てもらいたいターゲットに配慮した画像にしたり、ブランドのイメージを考慮したり、本来であればOGP画像にも、もっとUXやマーケティングのことまで考えて作った方が、より多くの成果を産むはずです。

また、Facebookに広告を出す場合の規定にも、このOGP画像が重要になってくるので注意が必要です。
Facebookが定めているルールでは、画像に占める文字エリアが20%以下でないと、表示されなかったり頻度が少なくなる。（※ルールがよく改定されるので要注意）
できれば全く文字を入れず、商品やサービスの内容がよく伝わる画像がベストのようですが、例えばセミナー開催情報など、全く文字を使わずに、写真だけで全て内容を伝えるのは多くの場合難しいはずです。
商品の場合は、パッケージに載っているロゴや商品名なども文字エリアとカウントされますから、全く文字がない画像というFacebook側の理想をクリアするのは非現実的ですよね。

ということで、a-blog cmsの記事で使うOGP画像について考えてみましょう。

「エントリーのOGP画像に任意のものをアップロードできるようにする方法」の続きを読む

ほとんどのことはコピペでOK！どこへペーストするかを理解して脱初心者 #ablogcms

a-blog cms Advent Calendar 2015 の19日目の記事です。初心者向けの記事になりますので、アップルップルの方やエバンジェリストの方、ヘビーユーザーの方は、軽く読み飛ばすどころか、絶対に読まないでください。仮に読もうという人がいるならば、最後の2段落だけ読んでいただければ結構です。（※出典：坂本さんのブログ）

コピペをマスターしよう！

最近ではプログラマさんの世界でも、できるだけコードを書かないという発想でプログラミングをするそうです。コードを書けば、ミスもある。バグも出る。フレームワークやライブラリを使い、自分で独自に書くことを減らすことで、効率よく品質を高められるということでしょうか。 a-blog cmsでWebサイト制作するときも同じようなことが言えます。

「a-blog cmsをカスタマイズするにあたって、一番重要なスキルは “コピペ” です！」 a-blog cmsのセミナーや企業での社内勉強会などで、わたしがよく使うセリフです。実際に、PHPなどのコードを書くことは、通常まずないですし、a-blog cmsのカスタマイズに必要なコードは、スニペットとして用意されていますから、自分でHTMLを書く必要もありません。コピペでだいたいのことができてしまいます。

「そんなことないやろ！」って思ってますよね？

ちょっと試してみましょうか。

例その１エントリーフォトのスニペットをコピペ

site2015 のお知らせのindexページの記事の上に、写真一覧のモジュールを挿入してみましょう。

「ほとんどのことはコピペでOK！どこへペーストするかを理解して脱初心者 #ablogcms」の続きを読む

Atom用のa-blog cmsスニペット #ablogcms

Atom用のスニペットです。
今どきは、Sublime Textを使ってコーディングしている方が多いと思います。a-blog cmsをダウンロードするとomakeフォルダの中に、SublimeText用のスニペットが用意されています。今のところ、a-blog cms 公式ではAtom用のスニペットはないので、よく使うものから登録してみました。

Atomを使ってa-blog cmsのコーディングをしている方はよかったら使ってください。管理画面内のスニペットを開いてコピペするよりもコーディングが早くなると思います。
スニペット出現後のカーソル位置は、モジュールIDのid名を入力する位置にフォーカスがきますので、最初にモジュールID名をコピーしてクリップボードに入れておくと便利です。
その後はTabキーで、classを入れたくなるような位置に順に送ります。

※本当は、Packageにして、a-blog cmsで使うスタイルガイドや組込みJS、グローバル変数なども、コードヒントとして出るようにしたいところですが、わたしの知識ではまだやり方がわからないので、どなたか協力してくださる人がいればご連絡いただきたく....。

Atomとは...

ちなみに、Atomとは、GitHubが開発したオープンソースのテキストエディタです。Sublime Textは70ドルするのに対しAtomは無料なので、Liteにコーディングされる方にはおすすめです。
また、「Package」とよばれるもので機能を追加でき、最近ではSublime Textに迫るほど使いやすいエディタになっています。
a-blog cmsのコーディングでは、マルチカーソルが使えるととても便利で、画像のアップロードのカスタムフィールドを追加するときなど、同じ変数名や文字列を一気に選択し同時に編集できるので、効率もよくなりますし、ミスも減ります。Atomでもこのあたりの機能は充実しているので、CMSを実装したり、プログラムを書く人にはおすすめです。