カテゴリー別アーカイブ: 日々のこと

SVGとVueでアバター的なものを作る

この記事はSVG Advent Calendar 2016の第11日目の参加記事です。

10日に厨二病SVGエフェクト集をまとめたものをアップしようと思ったのですが、真面目に時間なくて断念しました。
そこで、私が贔屓にしているVueでぱぱぱっとSVGを用いたアバターアプリ的なものを作ってみました。
時間の関係上装飾は簡素、スマホに最適化してないなどいろいろアレですがお許しください。なお、webkit環境でしか確認していません。

アバターアプリ的なもの

http://tanshio.net/svg2016/

アバターアプリ的なもの

VueはSVGも操作できるため、最初に全部表示したものを分岐で隠しているだけです。
その後非表示Canvasで画像化してダウンロードできるようにしてあります。

ソースコードはこちら
aiデータはこちら

これ自体は私が運営するサイトでやろうと思ってたことなのですが、この機会にやってみることにしました。
計1時間でできるだろうと思ったら、画像作るのに1時間かかりました…昔はフラッシュでやってたものがJSとSVGでできるようになったというのは感慨深いものが有ります。

ソースと言うほどのものじゃないので、ソースもイラレデータも使いたい人は勝手に持っていってOKです。

色を変えたりサムネイル表示したり、パーツの位置を変えたりなど、Vueであれば色々簡単にできそうですが、真面目に死にそうなので年末年始の暇な時にでもできたらいいかな的な感じです。

SVG Advent Calendar 2016はまだ空きがあるのと、イラスト参加でもOKみたいなので是非参加してみてください〜

探してもわからないということ

2015年も終わり、2016年もはや1ヶ月が過ぎてしまいました。
2015年のエントリが極端に少ないのですが、ぶっちゃけブログ書く暇もないぐらいコード書いていました。

Wakatimeというどれくらいコードを書いていたのかがわかるアプリがあるのですが、やばい時は一週間で100時間ぐらい書いててとんだブラックだな。。。と実感。今も60時間ぐらいなのでぶっちゃけ減らしたい。

コードをひたすら書いて痛感したあること

僕は大体フロントエンド、WordPress、PHP、Ruby on Rails、iOSアプリ、サーバーまわりなどWebで使うようなやつは一通り触ってきましたと思っています。

んで、大体上のようなやつって基本的に検索したら出てきますし、ドキュメントも豊富なんですよね。
実際コピペで済むような感じで済むものも多いですし、プログラミングも1つの言語しっかりやってればOKで他はその流用。問題が発生、わからないことがあった場合は基本的に探せばわかるスタンスでいましたし、解決した時の気分はコード書いている人であれば理解してもらえると思います。気持ちが良いもんです。承認欲求も満たされますよね。

でも、どうやってもわからないことにぶつかってしまいました。そしてそれが解決できない。1週間。。2週間。。1ヶ月。。。
検索しても出てこない、他の言語だったらできるのにできない、ドキュメントには書いてあるがそれはもはや低レイヤー過ぎて意味がわからない、使いどころがわからない。死ぬ。

わからないこと≠探せば見つかること

僕の場合は圧倒的に低レイヤーの知識が足りていませんでした。そして低レイヤーの問題は探しても見つかりにくい。なぜならばWebみたいにそこまでとっつきやすくないし、他のやり方、フレームワークがあったりするから。

音声を再生するという場合、だいたいmp4とかのデータを読み取るライブラリなどがあると思います。WebだったらAudioタグだったり、JSで操作したり。アプリであったら基本のフレームワークが解決してくれるはずです。でもそれがmp4ではない場合はどうでしょう?データが16進数だったら?どうやって再生すればよいでしょうか?

ネットワークであったり音声・画像・動画であったりそのような基本的にコアな部分ってあまり触る機会がないと思います。もう基本簡単に取り扱えるものなんですよね。でもそれって誰かが簡単にしてくれているだけであって、中身を自分でやろうとすると本当の意味で「わからない」になって襲ってきてしまうということが身にしみてわかりました。取っ掛かりがつかめないんですよね。

JSであればWebGLを取り扱うときに出てくるC、Obj-Cで出てくるCみたいな感じで突然出てくるもの。そういうものなんでしょうが、いきなり出てくる低レイヤーはほんとうの意味でわからないとそれを扱うのは非常に大変です。音声は波形だし、通信はソケットだしパケットだし???それどう使えばいいのかわからない。そしてそれがどう問題解決に役立つかわからない。誰も教えてくれないし探しても見つからないことだらけです。

研究者のメンタルを見習う

研究者の人たちってわからない、将来的にわからないままかもしれないことにチャレンジするじゃないですか。あのメンタルってただもんじゃないと思うんですよね。

僕の問題は1つは相談して解決できそう、もう1つは誰もわからなくて結局自分でわからないなりにやりまくってライブラリで頑張ってライブラリが終わりらへんで詰んで自分で実装するしかないみたいな感じで落ち着きそうなのですが、マジで心がバキバキに折れてるんですよね。ああ俺の実力なんてこんなもんですよね〜ああもう死にたい。みたいな。折れても立ち直れる心が欲しい。

おわりに

なんかよくわからなくなってきましたが、わからないことに突き進んでそれが解決するというモチベーションで頑張るっていうスタンスの見直しが僕には必要になってしまったという感じです。ひとそれぞれだとは思いますが、ネットでなんでもかんでも解決できるわけではないしそういったことこそ解決するために試行錯誤するしか無いという感じです。おわり。

さよなら2014年

2014年も今日で終わり。
本当に2014年は忙しく、(毎年言ってる)こんな自分に仕事をまわしてくれる人々に感謝しかない。

2014年はtwitterを個人としてはじめてみたり、ブログを30記事ぐらいだけど投稿してみたり、githubを始めてみたりして、そこから交流することが出来て非常に楽しいという感じでした。

いろんな技術に触れた

  • chef
  • angularJS
  • node-webkit
  • atom-shell
  • react

多分angular以外はお世話になりそうな気がする。
node-webkitとatom-shellはnode.jsさえわかれば楽にアプリが作れるので素直にすごいと思った。

反省

PC周りを最強にできなかった。

僕の作業環境は、地べたに座ってやるという感じで本当に体に負担がすごい。
2014年は机と椅子を買おうと思っていたんだけど、様々な出費が重なり、ドメイン失効で3万円吹っ飛んだりして椅子すら買うことができず、作業環境が整うことはなかった。2015年はまずはじめに机と椅子を揃えてPC周りを最強にしたい。

PCが壊れまくった

いつも使っているMacBook Air 2011が限界を突破しつつ有り、壊れたと思ったら復活するなどしたので買い換えたい。
Windowsの方はSSDにしたい。Windowsの方で最近は作業することもあったのだけれども、黒い画面やMacのいろんな作業環境になれるとやはりWindowsだとしんどかったりする。効率が5分の1ぐらいだった。

からだを大事にしたい

飲んだくれの毎日だったり、ダラダラ仕事を夜中にやったりしていて体をいたわってなかった。
最近若くなくなってきたのをひしひしと感じてきており、体力をつけるためにランニングとかいきたい。

ポートフォリオ作りたい

作る作る詐欺なのではやめに作っておきたい

来年の抱負

友人が結婚しまくってるけど関係なしにがんばりたい。
WEB以外でもいろいろできたらいいなーと思ってる所存です。

ほんとうにあのサイトが小4の作ったものだったら

ぼくは小4だよ!みんなかまって的なサイトが突如現れ、僕は唖然としました。
小4でAWSつかってHTML5でjQuery使って独自ドメイン、小4にしてはデザインもコーディングも結構きちんとしている。これがデジタルネイティブ、すげー時代になったもんだ、と。まあ嘘だったんですけど。
僕の場合、マジで小4が作ってマスメディアに取り上げられたりしていたら自分探しの旅()に出るところでした。実際は有名な学生が作ってたのであの程度かとホッとしました。

んで、僕がインターネットに触れ出したのがだいたい小6〜中1ぐらいなので、それを踏まえて今の小4だったらこんなレベルじゃないのかなーと勝手に想像してみます。

サーバーは無料サーバーにしよう

だいたい、AWSなんて使えるわけないじゃないですか。
まず、お金が必要なんですよ。小学生で銀行口座やクレジットカード使えますかと。僕はマクロミルでがんばってがんばって1500円ためてどうにか親を言いくるめて引きだしてようやく有料サーバーを借りることが出来たのが懐かしいです。
サーバーは子供らしく無料のFC2にしてろっていう話。

有料フォントは使わないようにしよう

カウンターのやつがDINだったと思うんですけど、僕がWEBデザイナー(自称)になっていまんとこ一番出費がでかいのがフォントです。子どもが有料フォント買いますかと。親に7,000円のフォント買ってほしいって言ったって多分意味わからないと一蹴され買ってくれないはずです。小4だったらおとなしくPOP体を使っておけっていう話。

ドメインはとっても自分の住所をいれよう

経験者は語る。
小4で個人情報うんぬんなんてしってるわけもなしで個人情報は駄々漏れのはずです。

ソースコードをきたなくしよう

小4だったらbrを連打してほしい。そしてできればmarqueeタグとfontタグという過去の産物を駆使して2000年台にタイムスリップしたような感じにして欲しかった。タグが大文字ならなお良し。クラス名は英語は×

本当の小4なら帰国子女とか英才教育でないかぎり、英語なんてろくに使えないからタグなりJavaScriptのコードの意味なんてわかんないから詰むだろうし、サイト持つにしてもみんなに日本の現状を知ってもらいたいとか意識高い系じゃなくて、自分の絵を見て欲しいとか俺すごいとかエロとかそういう衝動にかられてサイトを作るはずです。それが純粋無垢な子供のはずです。これから俺すごい系で本当にすごい人が現れてくれることを期待しています。

以下駄文

ネットは嘘を簡単につけるぶん、嘘をいう側のリテラシーも重要になります。2chでもTwitterでもなんでも、どこから情報がつながって個人情報が漏れるかなんて自分が把握できるわけもないです。知人かもしれないし、他人、サーバーから漏れる可能性も否定はできません。間違いではなく故意的な嘘、バレたら誰も得をしない嘘で人生を棒に振ってお疲れ様でした。一生信頼されないんじゃないでしょうか。

僕はああいう嘘をついてまで、知ってもらうことが重要なんです的な変な方向の意識高い系が嫌いなので、ああいう人たちとかかわらずに地味に仕事をしていきたいなと思います。tehuくんの今後が心配です。おわり

IEではposition:fixedかかったものは直でtransitionかけてあげる必要がある

bodyかhtmlに直接transitionかけてアニメーションさせることもあると思うのですが、IEではposition:fixedかけてあるものは除外されるようで困りました。

環境は、IE10、11です。

IEでposition:fixedかかったものが無視されるデモ

demo

直接かけてあげたデモ

demo2

動画デモ

さすがのIEくん過ぎてもう僕は何を信じていいのかわからなくなりました。

ページ遷移でフェードかけるだけのJavaScript作った

絶賛脱jQueryで墓穴を掘っている感ある今日このごろです。
いつまで続くのか分からない感ありますが、脱jQueryで作ったものをちまちま公開したいと思います。脱jQueryのせいで夏休みがなくなってる感あるので誰か使ってあげて下さい。

ページ遷移でフェードかけるだけのJavaScript

動作環境
transition使ってるためIE10以上(8以上にするかもしれませんがいつものようにしないと思います)

demo

オプション項目

一応内部アンカーは除外、クラスと属性も除外できるようにしてあります。
サイズは普通で4kb、minify版で2.4kbです

IEではなぜかposition:fixedかかってるものはフェードかからないため指定してあげる必要があります。面倒くさいですね。

たまに画面がちらつくのですが、多分データが重くないとちらつくみたい。その場合は直opacityかければと思ったんですけど、それでもちらついたりする場合があります。100%できるやり方があるのを知ってる方は教えて下さい。
なにか問題などあったらコメント下さい。コードは適当なのでパブリックドメインでかまいません。

ぶっちゃけページ遷移でエフェクトかけるのはおすすめしません。pjaxでもたまにちらついて中身見えたりするサイトもあるので難しいのかも。

作ってみて改めて思うのはjQuery is 神

SpookyJSでadwordsとスポンサードサーチとYDNのレポートをダウンロード

GoogleもYahooも広告配信レポートを現在APIでダウンロードすることができません。Google AdwordsではAPIで簡易的にレポートを作成できますが、インプレッションシェアなどの指標を指定することが出来ず、中途半端です。

メールで作られたよと報告はされるのですが、どうせなら送ってほしいものですよね。

というわけで全部ダウンロードするスクリプトを書いたのですが、私のMac Book Airちゃんがぶっ壊れてタイムマシーンで2週間前に戻ってしまい、危機感を覚えたのでここにメモしておきます。作業途中的な感じですが、わたくしの記憶力が普通の人間と同じぐらいであれば1週間後には出来上がっていると思います。

ダウンロードスクリプト

使い方

要node.js、casperjs、spookyjs(package.jsonをあとで置いておきます)

最初の行のIDとかPassを自分のに変えて下さい。

まとめ

いまのところスポンサードサーチしか動きません。UTF-8のCSVなのでExcelでそのまま開くことが出来ません。

黒歴史でやる気を出そう

人にはそれぞれ触れてはならない黒歴史があると思います。
僕にとってはネット・描いた漫画・人生、いわゆる現在進行形で黒歴史なわけなんですけど、いろいろ考えると黒歴史があればあるほど人は形作られていくのではないかと思うんです。僕の場合、黒歴史を振り返ったらやる気が出ましたのでさらけ出したいと思います。

僕のネット関連の黒歴史を紹介します(2004年まで)

1999~2000年ごろ

最初は2000年頃に海外のtripodというレンタルサーバーを用いてサイトを作っていました。悲しいことにtripodは消滅してしまい、かつwebarchiveにも残っていません。marqueeタグとか使ってめちゃくちゃなサイトを作っていました。なお、PCがなかったため近くのヨドバシカメラに居座ってたり、学校でHTMLを作成してました。部活とか塾、ボーイスカウトに行きながらだったのですごい執念だったと思います。ちなみにその頃のハンドルネームが今の基本パスワードです。多分一生変えません。

~2002年ごろ

様々な無料レンタルサーバーを借りたりしてサイトを作成していた気がします。
TT.jp
多分上のサイトが残ってるサイトで一番古いサイトだと思います。当時のCNNからソースコピペして遊んでた気が。当時はまだテーブルタグが主流だった気がします。jpドメインを取得していないのに名乗るあたりが黒歴史ですね。高校受験だったのになにしてるんですかね。

2003年


高校に無事受かり、PCを買ってもらいました。どうにかこうにかアフィリエイトで収入を得たような(もしくはマクロミルだったような)感じで、イーバンク銀行に親に内緒でお金をため、ドメインを購入しサイトを運用していました。当時のサイト作成ツールみたいなもので作った記憶があります。(今で言うWIXみたいな感じで動的にページを動かしたりしてテーブル・スタイルなどが出力されるもの。)
部活をたまにサボってサイトを作成していました。本当にアホですね。

質問したりしまくってた

いやー今から見ると凄い勢いを感じますね。今の自分よりグイグイ知識を吸収しようという感じがあるのでなんか感慨深いものがあります。当時のハンドルネームはshota74でした。結構被りやすかったのですぐ変えました。

これ以降は架空請求にひっかかったり、作ったWEBサービスが雑誌に載る、かつ破壊される、黒歴史サイトでネトランなどの雑誌に結構載る、部活・受験勉強のあとに深夜3時までネットに浸るという生活サイクルの末ニートになりそうになる(実質なった)と言った感じで思い出したくもないような良い思い出になってます。2004年以降は素でアレなので、2004年以降のものをさらけ出すのは更に10年後とか、私がビッグになってからだと思います。。(遠い目)


おわりに

学生のころや若いうちの黒歴史っていうのは、当時は本当に本当に心の底から好きだったからこそ生まれるものです。好きこそものの上手なれとはよくいいますけど、その好きという言葉を最近は見失っていた気がしました。

これからWEB制作を始める人、新卒の人などは仕事ではありますがこれからたくさんの黒歴史や見たくない思い出を作っていくことになるはずです。最初はだれだってうまくいくはずがない。しかしたくさん失敗してこそ自分は形作られていくものです。助けが欲しかったら人を頼ればいい、失敗しても助けてくれる人は近くにもいますし、ネットを通じて世界中の人が助けてくれる世の中です。

僕の場合大人になるにつれ失敗することを恐れるあまり、黒歴史時代のようにガツガツいきづらくなってしまいました。でも、試行錯誤している黒歴史時代の自分を見るともっと気楽でいいんじゃないかと思うようになりました。

武田鉄矢さんの言葉に、

「これから本当につらい事があったときに、自分を励ましてくれるのは、過去の自分だけなんだよ」

というものがあります。

最近は辛いことばかりでしたが、本当に自分を励ましてくれたのは過去の自分でした。今の自分が5年後、10年後の自分の助けになれるように、たくさんの黒歴史をこれからも作っていけたらと思っています。
本当に本当に自分が追い詰められたら、張り切ってた当時の自分に助けを求めるっていうのもひとつの手かもしれませんね。

クリエイティブに生きる

最近はどう効率良く生きるか、がんばらないで成果を出すか、どう楽してお金を稼ぐかという方法にしか目が行ってなかった。

成果を出すということは素晴らしいことだと思うし、そのおかげで私の業務委託先だったり常駐先、請負先などから正社員にならないかというお話も結構頂いている。
おそらく現在の二十代三十代の中で、今の時点ではもらっている方だと思うし、金銭面的な感じで1つの会社の正社員になると今よりニ分の一から三分の一になるので…とお断りしている。今のほうが違った視点でものを見られるという考えもあるけど。

ファッションEC、かばん屋EC、時計屋EC、NPO法人、アプリ開発、請負コーディング、イラストなど、どれもこれも違ったテイストでそれに応じた施策が必要になる。
LP作ったり広告文変えたり、画像変えたり、リニューアルしたり、最新の技術を取り入れたりとなった時に、最近はきまりきまったテンプレート作ってすぐ終わらせていたような感じだった。それで失敗もたまにはあるけど結果も出るしとなあなあになっていった。違った視点で~とか自分で言いつつ、そこらへんにあるようなものをパクりドヤ顔になってる。なのでモヤモヤしていた。

んで、最近あまりやらない新規デザイン案件がPC2件、スマホ2件回ってきてめんどくせーと思ったときにふと考えたのが、私のWEBへの入り口はWEBデザインだったなーと。
当時はFlash全盛期で、バリバリいろいろやったりしてどうにかして誰かを感動させたりびっくりさせたい、面白い体験をさせてやるぜみたいな感じだったのが、今は売上を上げるためのテクニックに固執している。解析ツールを見ながらあーだこーだいう感じになりつつある。これじゃ面白く無い。それも重要だけど、クリエイティブな発想じゃあない。魂こもってない。なんかよく言葉にまとめられないけど、2014年はクリエイティブなことをしつつちゃんといろんな企業や人に貢献、んで自分も楽しむという感じにやっていくことにする。最近は超なあなあで限界を突破したものを作ってなかった気がするので、仕事も趣味も限界を突破した作品を作りたいと思う。ようするに血反吐はけよという根性論なので私はドMなのかもしれない。

中途半端なフルスタックエンジニアそしてグロースハッカーになろう

最近私が思うことの一つが、WEBデザインやフロントエンド、バックエンド、プログラミング、WEBマーケティングどれか一つに特化した人は今後淘汰されていくんではないかなぁということです。
圧倒的なスキルを持つ有名人や、チームで担当が分けられている場合ならともかく、フリーで働いている人の場合一つのことのみではやっていけなくなるような気が。

現在はWixやWordPress、Google Site、Jimdoなど簡単にそれなりのデザイン、かつ伝えられることは伝えられるページが作れるようになったので、制作案件も減る可能性もあるかもしれません。Facebookで事足りるわという市もあるぐらいだからねー

若干話はそれますが、私が誰かにWEBを教える時には、とにかくやらせて覚えさせるタイプで、順序は異なれど
HTML+CSS→javascript→PHP(Ruby)→バックエンド→マーケティング→効率化(Sass、GruntもしくはGulpやcodekit、Gitで履歴管理、フレームワークでプログラミングの効率化、Vagrant、Docker・Droneで仮想環境の構築)
といった感じでWEBはこういう感じで作られて、支えられていることを伝え、ビジネスとして昇華できるフローを作成しています。(と勝手に思っています。)

(WEBデザインに関しては、話すと一番長くなるかつ個人的な意見ばかりになるのでマーケティングの中に取り入れています。ターゲット層とかにマッチしてればOK的な。コーディングもそうですが正解はあるけどそれが1つではない苦しい分野なので。)

前置きはここまで。
んで、これから先は、フリーにしてもインハウスにしても、制作会社にしてもフルスタックエンジニア、グロースハッカーのみでいいんじゃね?的な感じに思っています。

フルスタックエンジニアとは

フルスタックエンジニアというのは、デザインもできてコードもできる、かつバックエンドの処理、テストもできるなどのスーパーエンジニアみたいなもんです。
iOSのアプリ書いてる人はおそらくみんな自分でデザインもやっていると思うので、フルスタックエンジニアの範疇に収まるのではないでしょうか。

グロースハッカーとは

プロダクトやサービスなどのグロースに焦点を当て、マーケティングや戦略の課題をクリエイティブに解決する人物のこと。ようするに提案、これこれこうしたらどうですかねだけで終わるのではなく自分で解決・実践できる能力を持つ人のことですかね。コードはあればよしみたいな感じらしいですが。

日本だと、百式やドットインストールの田口 元さん、様々なアプリを開発しているfladdictの深津 貴之さん、ミイルの開発、wri.peの運営を行っている増井 雄一郎さんなどがあげられるのではないかと思います。
みなさん伝説的な人であり、私が思うだけかもしれませんがマーケティングにも強いんじゃないかなーと思っています。

海外だとinstagramの開発者はそんな感じだったような。サービス開始にサーバーに負荷がかかりあたふたしたけどどうにかなり、それを現在では糧にできているという。

多分今後はフルスタックエンジニア+グロースハッカー、いわゆるなんでも出来る人が強い、とうか欲されることになるのではないかと勝手に思っています。俯瞰して見れるので、ディレクターとして見た時には最高の働きができる、さらに自分も動ける人。多分日本だと起業するか海外に行くか・・・になりそうな気がしないでもない。

何事もやればどうにかなる

んで、今日これを書くきっかけになったのは、「私コーディングがメインなので」とか、「あなたはSEOがメインなんですね」とかそういう言葉にカチンときたというか、なんかちがうなーと思ったからで。私が短気なのは否めないですがw

WEBデザインできて私コーディングできないんですとか言うんであればHTML5+CSS3勉強すればいいだけで、コーディングできてjavascriptできないんであればまた勉強すればいいだけ。プログラミングもマーケティングも勉強。そして実践。
これが数学的知識を用いるゲームや、確率・統計学を用いるシステムの場合は別ですが、WEBのメリットっていうのは手早く結果を見ることができるということなので、これほど勉強した結果がついてくる環境はないと思ってます。良くも悪くも検索すれば落ちてるし。今ではGitという履歴管理システムもあるので、これを最初に覚えておけば、自分のログが残って、「うおお俺成長してるわ!」ということもできたりします。(googleカレンダーやブログでもできます。。。)

なんにせよ一つのことにこだわるということも大事ですが、フランクに様々な知識を取り入れてすぐ実践することが重要な時期になったと思います。
携帯サイト(リアルとか前略プロフィール、デコログ)が流行った時期もそうですが、もうだれでもホームページという名のWEBサイトを作れる環境にある時代です。
作るだけではなく、その先を見据えることのできるフルスタックエンジニア、グロースハッカーが今後増えてくれるとWEB業界ももっと盛り上がるんじゃないかなーと思います。とにかくWEBに携わるみんながiOSアプリなりAndroidなりWEBサービスなりを開発してみようという話ですね(やるやる詐欺の自分に喝)