typ stem


typ stem

今回はtypシリーズの二つ目です。
前前回のtyp strokeに比べスッキリとしたデザインで、太字の列一つと、その下に細い文字が並ぶ形になっています。
使い方は以前と同様です。
アイキャッチ等に活用できるかと思います。

今回の説明は以上です。
以前まで、利用技術や注意点、云々と述べてきましたが、そろそろ書くこともなくなってきました。
今回を含め、次回からはただのつぶやきのような日記調で書いていくことが増えていくかと思います。

基本的には、自分と同じ境遇のデザイナー、エンジニア等々クリエイターの方々が読んで楽しめる記事にしていこうと思います。
引き続きどうぞよろしくお願いします。
ちなみにtwitterの方でも更新の際はツイートするつもりですので、もしよかったらフォローをお願いします。

xmlの苦悩

SVGをいじっていて思うことは、やはり手でプログラムするものではないな、ということです。
デザイナーの方はillustratorで書き出してしまえばおしまいなので、あまり実感は湧かないと思いますが、HTMLと比べ、書き方がより厳格なXMLは、手打ちしようものならばすぐにエラーが表示され、何も映らなくなります。

基本的には、閉じタグの付け忘れが主ですね。以下のようなものがあります。
<hr /> <br /> <link re="~" />
リンクタグに関しては、webフォントを利用したい時に、記述しましたが、何でエラーが出ているのかしばらくわからず戸惑いました。

ですが、このような違いはまだいい方で、他にxmlの特徴として、大文字、小文字の区別が必要だという、これまた厄介なものがあります。
ストップウォッチを作った際に、onClick=""この属性を使ったのですが、(多くの人は感覚的にロアーキャメルケースで書きますよね?)xmlではonclick=""しか受け付けないようで。

この時も発見するまで、本当に時間がかかりました。
やはり、xmlがhtmlと記述方法がほとんど同じだと思っていると痛い目を見ますね。
そしてこれからはillustratorの力も借りて、適度にソフトに委ねていきたいなと思った次第です。

web描画のシステム

話は変わって、最近はwebブラウザの性能も上がり、アニメーションや図形描画のグラフィックスもよりよくなってきましたよね。
最近だと、このwaterというwebサイトが有名です。
twitterでも、このサイトを取り上げたツイートが広く拡散されているので、見たことがある人もいるかと思います。

とても綺麗な3Dグラフィックですよね。このサイトにはwebGLが使われているそうです。
webGLといえば、昔まではwebGL,HTML5canvas, svgとグラフィックスの描画が可能な技術がたくさん出てきてそれぞれの特徴を理解するのに苦労したことを思い出します。
ACTIVE-FRAMEも最終的にこの3つの中から、SVGを選んだわけですが、これまでブラウザ上の描画技術に触れていない人だと区別が難しいですよね。

それもそのはずです、僕が思うに、adobe社のFlashが2020年で終了することが決定してからでしょうか、これらの技術が急激に表に出てきた印象があります。
Flashがこれまで担ってきた動的かつ多彩なインタラクティブ性のある体験を、HTML5へと進化したwebブラウザ上でどう表現するか。
W3Cなどさまざまな団体が思案した結果が、現在です。

情報技術はどんどんと目まぐるしく変化していくわけですが、これらを思うとFlashを仕事にしていた方が不憫に思えて仕方ありません。
Flashクリエイターという職業があったくらいですから、当時はFlashが絶大な人気を誇っていたことがわかります。
現在、自分でもSVGという技術に依存し開発している身としては、無視できない背景がありますね。