mkasumi.com


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

たとえば、「製品名の名前が変わったので、サイト内に載っている製品名をすべて書き換えたい」、「リンク先が変わったので、サイト内に掲載しているリンク先を書き換えたい」などの要望をお客さんから受けたことはありませんか?

コンテンツが数ページであれば困りませんが、コンテンツ量が多いサイトでは困ることが多いのではないかと思います。

「a-blog cmsに登録されたテキストの置換を効率よく行うための小ネタ」のつづきを読む


Posted by 森田かすみ at 00:00  Permalink

2016年9月23日(金)に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。


(写真)登壇風景

今回お話しした理由

今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。

私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので(開発環境、作業効率、メンテナンス性などなど)、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし、だからこそ基本のところは知って欲しいという思いがあります。

なので、私が何に悩んで、どういう風に普段落とし所を見つけているのかを共有したいと思いました。マークアップは一般的な正解を導き出すのはなかなか難しく、意見がたくさんあります。どのマークアップを選ぶのか、悩んだときにどうやって解決するのかを自分で導き出して欲しいと思ったので、納期を守りつつ、クライアントの要望に沿いながら、どうやって最適な解答を導き出したらいいのかを、マークアップエンジニア歴3年半の私の考え方をまとめました。

今回のセッションは考え方の部分が多いので、がっちりしたテクニックの知識がほしかった方には物足りないように感じたかもしれません。ですが、私が今回聞いてほしいと思っていたマークアップをこれから始める方にはしっかりと伝えられたようでよかったです。

「「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました」のつづきを読む


Tag:コーディング HTML セミナー マークアップ 

Posted by 森田かすみ at 21:41  Permalink

もしかしたら中には難しいことをせずに、画像でマスクしてトリミングしている方もいるかもしれませんが、今回は以下の理由があり、SVGのclipPath要素を使うことにしました。

  • デザイナーさんから手書き風に画像をトリミングしたいという要望があった
  • クライアントがCMSから画像を更新するとき、画像を加工する手間を省きたい
  • パスをモーフィングアニメーションさせたい

子猫の顔が全部見えないのが悲しいですが、クリップパスの実装イメージ


実際のコードは以下のURLからご覧ください。

※Part1のソースコードはなんだかぎこちなかったので、改良したソースコードがPart2になります。

「SVGのclipPath要素を使ってモーフィングアニメーションする」のつづきを読む


Tag:SVG アニメーション 

Posted by 森田かすみ at 13:27  Permalink

2016年8月20日(土)に開催された WCAN mini 2016 Vol.2 SVG Maniax in Nagoya で、制作したSVG絵本「ピヨスケとたまごのぼうし」についてライトニングトークとして発表しました。

もともと、私は学生時代は絵本専攻を選択していて、「Webなら読者が参加できる絵本を作れるのでは?」という思いも少し持ちつつこの道を選択した理由でもあったので、個人的には念願のWebでの絵本制作でした。

今回はSVGがテーマだったため、SVGの技術を使った絵本を制作しました。私が作成した絵本は以下のリンクからご覧いただけます(※ SVGの学習用の制作物のため、一部ブラウザで正常に動かないことがあります。CSSアニメーションを使っているので、IEやEdgeでは正常に動きません。デスクトップのChrome・FireFoxでは正常に動きます。Safariでは6ページ目が動きません)。

制作した絵本



「WCAN mini 2016 Vol.2でSVG絵本「ピヨスケとたまごのぼうし」を発表しました」のつづきを読む


Tag:SVG 絵本 

Posted by 森田かすみ at 23:13  Permalink


Ver.2.6.0から新しくテンプレートの変数化という機能が追加されました。今回の記事はテンプレートの変数化の機能の1つ、「setRendered」についてです。 もしテンプレートの変数化をまだご存知ない方は公式サイトのドキュメントをご覧ください。(※この記事ではsetRenderedを使うメリットをご紹介していますが、使い方については説明していません。使い方を知りたい場合は公式ドキュメントをご覧ください)

テンプレートの変数化の機能の話を他の製作者の方にすると、setTemplateは大体理解してもらえるのですが、なかなかsetRenderedの使いどころがぱっと思いつくことが難しいようで、私もはじめて機能ができたとき、どういったときにsetRenderedを使えばいいのかわかりませんでした。

ですが、setTemplateがテンプレートを管理する機能なら、setRenderedは今まで出来なかったことを可能にしてくれる機能です。今回の記事のタイトルにも書いてありますが、変数をブロックの外でも使えるようになります。setRenderedは、私のようなノンプログラマーが歯がゆい思いをしたときにも使えるので、今は便利な機能だと思っています。今回はそんなsetRenderedの便利な使い方をお伝えします。

SetRenderedを使うと具体的にできること

具体的に言うと、例えば、Entry_Summaryのモジュールのentry:loop内で使えない変数をentry:loop内でも使えるようになります。

SetRenderedの使いどころ

もし、エントリーサマリーモジュールで、各エントリーのリンク先を一覧ページにしたいとき、きっとこのように書くことが理想的だと思います。

各エントリーのリンク先を一覧ページにしたいときの理想の書き方

<!-- BEGIN_MODULE Entry_Summary -->
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{indexUrl}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_Summary -->

「変数をブロックの外でも使えるようにできる a-blog cms のsetRenderedの使い方」のつづきを読む


Tag:a-blogcms 

Posted by 森田かすみ at 13:30  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー