mkasumi.com


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


(写真)登壇風景

今回お話しした理由

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

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

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

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

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


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

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

先日、2月27日(土)に行われた、CMSMix Sapporo 〜Web制作の幅が広がる!プロジェクトの傾向から考える、2つ目・3つ目のCMS選び〜 という5つのCMSのセッションが聞ける勉強会で、a-blog cms のセッションのスピーカーとして登壇しました。


(写真)

a-blog cms セッションの風景


撮影:キタゴエスタッフ

写真は、札幌のITメディアキタゴエさんに撮影していただいたものです。

「CMSMix Sapporo でa-blog cmsセッションのスピーカーとして登壇しました」のつづきを読む


Tag:CMS セミナー 

Posted by 森田かすみ at 19:57  Permalink

a-blog cms の Unit_List のおすすめの使いかたについて、a-blog cms DAY in Nagoya で紹介しました。今回はa-blog cms DAYの後に、a-blog cms Training Camp 2015 Autumn が開催され、私は事例紹介の枠で10分ほどお時間をいただきましたが、タイトルを見たらわかる通り機能紹介9割事例紹介1割の内容になっています。

「a-blog cms の Unit_List のおすすめの使いかた」のつづきを読む


Tag:a-blogcms CMS セミナー 

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


10月24日(土)に名古屋で開催された「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました。講師は BA 太田良典さん、株式会社Gaji-Labo 山岸ひとみさんでした。

株式会社ボーンデジタルさんが出版している「コーディング Webアクセシビリティ」と「デザイニングWebアクセシビリティ」の出版イベントでした。勉強会&ワークショップということでちょっとドキドキしながらの参加でした。

「「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました」のつづきを読む


Tag:アクセシビリティ コーディング セミナー 

Posted by 森田かすみ at 12:04  Permalink

写真:HTML5名古屋勉強会風景

HTML5NAGOYA #16ではテーマがSVGということで、「CSSでできるSVGアニメーション」というタイトルでお話ししてきました。

JSと比べるとCSSはブラウザ対応していないし、できるアニメーションも少ないのですが、 CSSでできたらお手軽ですよね。

どちらかというと私はJSはできないほうで、CSSでアニメーションできたらいいのにな、と日頃探している人なので、同じような人にちょっとでも面白いなと思ってもらえたら幸いです。

今回ご紹介した主なアニメーション

  • トランスフォーム
  • ドローイングアニメーション
  • 円グラフ

トランスフォームのアニメーションについて

スライドでもご紹介しているトランスフォームのアニメーションはpngやjpegでもできたりしますが、書き出しやCSSスプライトにわけるのがとても手間がかかってしまいます。(実は、実際に趣味で制作していたのですが、途中で挫折してしまいました…。)SVGは、イラストレーターで書いて、SVGに拡張子を変換したらすでにパーツごとに分かれていて、idやclassも適応できるので比較的楽に実装できます。

写真だとか複雑なイラストなどのSVGで表現できないものはpngやjpegのほうがいいと思いますが、簡単な図形やパーツが多いものはSVGのほうがいいんではないかなと思います。

ドローイングアニメーションについて

ドローイングアニメーションについては1年ほど前の記事ですが、説明しているものがありますので、スライドではわからないという方はこちらをご覧ください。

円グラフについて

円グラフは最近海外の記事やデモでいろんな人が作成しているので気になっていたアニメーションでした。こちらは主にSmashing Magazine の Designing Flexible Pie Charts With CSS and SVG の記事を参考にしたものを自分なりに解釈して今回ご紹介しました。英語ですが、こちらの記事はとてもわかりやすいのでおすすめです。

個人的には、学生の頃役には日常生活では立たないと思っていた円周率がSVGで大活躍して義務教育にありがたみを感じました。


最後に

今回はCSSでできる範囲でご紹介しましたが、やはりJSもできたほうが表現が広がります。日頃からJSも勉強したいと思っているので、再度エンジンをかけていきたい所存です!

今回発表させていただいたHTML5NAGOYAですが、次回は未定だそうです。発表者がいれば開催するそうなので、興味ある方はツイッターアカウントGoogle グループがあるので、こちらから連絡できると思います。

それでは、この度は貴重なご機会をありがとうございました!


Tag:SVG セミナー 

Posted by 森田かすみ at 10:11  Permalink

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー