mkasumi.com


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


(写真)登壇風景

「「マークアップの最適解を見つけ出す方法」というセッションを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アクセシビリティに対応しているサイトを制作する機会があったので、最近Webアクセシビリティについて勉強しています。今回の記事はWebアクセシビリティビギナーな私が、実際に対応してみてWebアクセシビリティについて改めて知ったことや感じたことを社内の人に共有したくて、先日行われた公開アップルップル社内勉強会用にまとめたものです。

Webアクセシビリティ対応への印象

正直、Webアクセシビリティ対応は周りの人たちが抵抗感を感じているようなので、すごく怖いイメージがありました。実際に JISの規格表を読んでみると、私が普段意識していなかったことも書かれていましたが、普段から行っているような対応方法も記述されていました。一般的に怖がられているものは、「時間依存メディアのガイドライン」であったり、コントラスト比であったり、Javascriptが関わってくる部分は対応に時間がかかるのかなという印象を受けました。

実際にJISの規格表を読んでみて、私自身納得できるような対応が紹介されていることもあり、どうマークアップするとベターまたはベストプラクティスなのか判断するヒントをもらえたような気がしています。

「Webアクセシビリティについて勉強してみて知ったことや感じたこと」のつづきを読む


Tag:HTML アクセシビリティ CSS 

Posted by 森田かすみ at 14:53  Permalink

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー