[scss]毎回面倒な吹き出しをmixin化

なんでもっと早くやらなかったのか不思議で仕方ない。
毎回普通にcss書いてたので、流石にめんどくさくてmixin作りました。
単色の吹き出しに使えます。

[css]
// mixin
@mixin balloon-arrow($direction, $duration, $color) {
position: absolute;
content: “”;
display: block;
width: 0;
height: 0;
border-style: solid;
@if $direction == top {
top: -$duration;
left: 50%;
margin-left: -$duration;
border-width: 0 $duration $duration $duration;
border-color: transparent transparent $color transparent;
}
@if $direction == right {
right: -$duration;
top: 50%;
margin-top: -$duration;
border-width: $duration 0 $duration $duration;
border-color: transparent transparent transparent $color;
}
@if $direction == bottom {
bottom: -$duration;
left: 50%;
margin-left: -$duration;
border-width: $duration $duration 0 $duration;
border-color: $color transparent transparent transparent;
}
@if $direction == left {
left: -$duration;
top: 50%;
margin-top: -$duration;
border-width: $duration $duration $duration 0 ;
border-color: transparent $color transparent transparent;
}
}
[/css]
引数はそれぞれ
$direction 吹き出しの方向、top, right, bottom, leftで指定 bottomだったらボックスの下にくっつく
$duration 吹き出しの大きさ pxで指定
$color 吹き出しの色 hexでもrgbでもrgbaでもok

[css]
// scss
.balloon {
background: #000;
border-radius: 20px;
position: relative;

&:after {
@include balloon-arrow(bottom, 20px, #000);
}
}
[/css]

Adobe AnimateCCでサクッとHTML5 canvasアニメーションを作れた

Adobe AnimateCCって?

Adobe AnimateCCは昔ウェブ界を席巻していた、旧Flashです。
Flashと同じ感覚で、canvasアニメーションが作れるみたいです。
僕はスクリプト系はてんでダメなんで、GUIでcanvasアニメーションがサクッと作れるのは非常に助かります。
ただ、現状使用している人自体が少なく、スクリプトの記述方法action scriptと若干変わってたりしてノウハウがあまりなくて独学で勉強するしかないのはちょっと辛いところだと思います。時間をかけてじっくり学んでいこうと思います。

ただ、そのままだとIE10で表示されないので、create.jsのdevicePixelRatioを調整する必要があるそうです(元同僚に教えてもらった)。
animateでパブリッシュした際に出力されるscriptのvar canvas, stage, exportRoot;の前に、以下の記述をすればIE10でも表示できます。
[html]
if("devicePixelRatio" in window === false) {
window.devicePixelRatio = 1;
}
[/html]

一応検証した限りでは、以下のブラウザで動きました。

  • Chrome52+
  • Firefox48+
  • Safari9+
  • IE10+

canvasなのでスマホでも問題ないはずです。

ブログ復帰 新年のご挨拶

新年あけましておめでとうございます。

昨年、夏頃にとある案件で、wordpressのテストがてら自分のブログをアップデートしたところ、管理画面のすべてのjavascriptが全滅して投稿が一切出来なくなる状態に陥り、その後は多忙のため、自分のブログに関してはずっと放置していました。

さらに年末にサーバのphpをアップデートしたところ、メールサーバーが死んだので心機一転として新しいサーバーを借り、そこへ環境構築し、新たな年を新たな環境で迎えることにしました。

見た目はそのままですが、中身は新たにこれからまたブログは再開しようと思っています。

本年もどうぞよろしくお願いいたします。

[漫画の紹介]オンナミチ

concreteと関係ない話です。本当は別のブログ作ってやるべきなんだけど、お察しください。

お友達の北沢バンビ先生がスペリオールで描いているオンナミチの4巻が先日発売されたので宣伝。
僕が勝手にやっててお金貰ってないので「ステマ」ではない、「マ」です。

“だめんず引きまくりオンナ”の前に、突如現れたパンチの効いたオバハン・・・その驚愕の正体とは!?
人生を変えるなら今・・・決意の三十路オンナミチ!!!

小学館の公式サイトで第一話が無料で読めます。

一話を読むと分かる通り、突然現れるオバちゃんは20年後の主人公 山口梨花本人なのでありますが、20年の間に何があったのか性格が全く違います。というかなぜか関西弁になってたりします。もはや別人ではなかろうか(笑
オバちゃん(山口梨花)は20年後に死んでしまうのですが、なぜか現代に蘇ったオバちゃんが、あれやこれや叱咤したり助言したりして今の梨花と人生を歩んでいく、そんなストーリーです。
オバちゃんの形態は、梨花がオバちゃんが歩んで来た道と異なる行動を起こすたびに変化します。過去が変わったら未来も変わるという理屈でそれは髪型だったり、ファッションだったり様々。毎回何かしら変身するオバちゃんが楽しみです。

そういえば、いつの間にかオバちゃんって梨花の家に住み着いてたんですね。話の流れ的に近くにいるものだと思ってたんだけど、4巻の最後にあんな話になったから気になりました。

この記事書いてる最中にもまた最初から読みたくなってしまった。

Kindle版でも出てるので是非。オンナミチ(1) (ビッグコミックス)

ぶっちゃけ、今だから言えるんだけど、バンビ先生と知り合う前に妻からバンビ先生の漫画を読ませてもらったときに最初に見たのがエロい漫画だったので先生の事をしばらくの間エロ漫画家だと思ってました。すいません…。