タグ別アーカイブ: javascript

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

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

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

アバターアプリ的なもの

アバターアプリ的なもの

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

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

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

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

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

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

iOS8でvwとvhが動かないし開発者ツールは動かないしで困った

実装中のやつで、vwとvhが使えるような案件だったので使ってみたところ、iOS6、iOS7は動くのにiOS8では動かなくて困りました。

vw・vhとは

親の要素をぶちやぶって、ウインドウサイズで幅や高さを指定できるプロパティです。

100vwで横幅いっぱい、100vhで縦幅いっぱいと、JavaScriptで頑張んなきゃいけなかったものが簡単に指定できます。calcと一緒に用いて使うと便利です。

ブラウザはIEは9〜、Android4.4〜なので使えるっちゃ使える感じです。

iOS8で動かない

9月23日現在、iOS8でvw、vhどちらも動きません。vwは要素の幅、vhはメニューバーも計算された高さが指定されているように思えます。

検証できない

Safariの開発者ツールがiOS8にまだ対応していないみたいで、Yosemiteが公開されたらiOS8もデバッグできるようになるとか。

WebKit Nightly Builds

とりあえず上記のNightly版を入れることにより、無事デバッグすることが出来、やはりvw、vhがバグってることが確認できました。

対応

横幅は親要素を超過していないのでwidth:100%で乗り切る。縦幅はJavaScriptでinnerHeightを用いることで制御することが出来ました。

まとめ

iOS8のバグが多分いままでより多い気がする。
ファイルもアップできないしで、あんまり変わっていないように見えて内部ではいろいろ変わっているみたいですね。plusも登場してこれからアプリ制作やWeb制作は非常にカオスになりそうな気がしてます。

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 神

JSON.parseとJSON.stringifyでらくらく配列のディープコピー

現在午前4時なのですが、仙台ではセミが鳴いています。皆さん今日も元気にpushしておりますか。

pushといえば最近ではgitですが、JavaScriptの配列のコピーなどでも使いますよね。
concatでもいいんですが、あいつは多次元配列でも容赦無いのでここでは華麗にスルーします。
ゲームを作っていたのですが、その時に配列のコピーで悩んだことがあったのでメモしておきます。

参照でハマる

下記のようなオブジェクトがあったとした時に、

オブジェクト内の配列をまるごとコピーして、更にキーを配列の最初に取り付けたいというわがままコードを作成していたのですが、まんまと参照という罠に引掛かって2度めのアクション時に壮大にバグりました。

アイスの種類の左側にiceやchipiceというカテゴリーをつけたかったのですが、参照だったため2度目以降はice,iceとかダブるという素晴らしいコードになってしまいました。
一番簡単なのはオブジェクトに書き足すということなのですが、負けたくなかったため頑張りました。

ケース1 pushとかしまくる

配列を走査して、配列かどうかを確認しpushとかしまくる。配列の値が長いかつ面白く無いので却下

ケース2 JSON.parseとJSON.stringifyで完結

JSON.parse(JSON.stringify(配列やらオブジェクトやら))

もともとJSONだったのを埋め込みたいがためにオブジェクトにしたためてんてこまいだったけど、JSONでパースしてしまえばオブジェクトでも配列でもなんでもかんでもディープコピーできるので楽。

コード

まとめ

Firefox

Chrome

Chromeでは、なぜかJSON.parseしたやつだと、配列をいじるかなにかしないとインスペクタでバグってるような感じになる。しかしながらちゃんと配列として格納されているのでインスペクタがおかしいんだと思います。

IE7以下の呪われしブラウザ以外は動くので配列やオブジェクトをコピーしたい場合には楽だと思います。
全然関係ないですけどライブラリを用いないでゲームを作ると自分のスキルの物足りなさを実感できるのでオススメ。

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でそのまま開くことが出来ません。

id属性はjsでグローバル変数化されるけどIEではそうもいかないっぽい

最近のブラウザでは、HTMLのid属性が勝手にjavascriptのグローバル変数になってしまいます。
hiddenのinput要素に、jsでvalueを設定しようとして、ケアレスミスで変数名を間違った時にIEの挙動がおかしいなあと思って調べてみました。

サンプルコード

HTML

JS

んで、上記の場合はモダンブラウザで動いてしまったので、IE系列で動かず四苦八苦しました。ちゃんと変数名を確認するべきだった・・・\(^o^)/

モダンブラウザのキャプチャ(FF29)

(Chromeもキャプチャしたやつもあったんだけど、間違ってIEキャプチャしたやつで上書きしてしまい消失しました)

IE11のキャプチャ

閉じタグがないものはグローバル変数化されないのかな?とも思って、imgタグにid=imageを振ってみて試してみたら、普通にimage.srcで画像のURLが取得できた。
どうやらIEではinputなどの要素はグローバル変数化されないみたいで、そのルールが良くわからない。

まとめ

idは勝手にグローバル変数化されるので、本当に必要な物以外はできるだけclassでコーディングしたいなと思いました。(小並感)
ぶっちゃけグローバル変数にするメリットが思いつかないんですが、なにかあるんですかね。

参考:HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される

Google AnalyticsでIPやCookieを判別できるようにする「PHPAnalyticsIP」を作った

2014年12月5日に動かなかったプログラムを修正しました。
タイプミスによりうまく動かなかったものを修正しました。

2014年7月21日に設定を変更しました。
セッションごとにcookieが変更されてしまうものを修正しました。

Google Analyticsといえば、多分世界で一番使われている解析ツール。
最高に便利なのですが、これがあればもっといいのになあと思う機能の一つに生ログがあります。残念ながらAnalyticsには1人1人を追跡する機能がないです。大体のサイトでコンバージョンとなる、フォームから送られてくるデータと照らし合わせ、特定する場合に、カスタムセグメント地獄に陥りやすく手間になります。
Analyticsはグループ化したデータを見るのに最適ですが、1人1人のデータを見るのには工夫が必要となります。

IPとCookieをAnalyticsで見られるようにしよう

IPとCookieをAnalyticsで見られるようにするサイトとして、AnalyticsIPさんがあります。しかしながら、クロスドメインとなってしまうため、Safari(Win・Mac・iPhone・Ipad)と一部アンドロイド端末(多分)でIPでは判別できてもCookieで判別することが出来ません。
スマホが普及してますし、かつスマホの場合IPがコロコロ変わりやがるのでCookieが取得できないのはどうしたものか。。。というわけで作りました。

PHPAnalyticsIP

https://github.com/tanshio/phpAnalyticsIPzip

機能

オリジナルであるAnalyticsIPさんのメソッド名を拝借させていただきました。PHP版とJS版の2パターンあります。

setAnalytics.getIP()

→ex. XXX.XXX.XXX.XXX
IPアドレスを返します。
JS版では対応していません。

setAnalytics.getCookie()

→MD5 hash
ハッシュ化してユニーク化しているつもりのものを返します。
JS版ではランダムな文字列2つくっつけてユニーク化しているつもりです。

setAnalytics.getAccessTime()

→ex. 2014/05/28 12:04:42
ページを開いた時間を返します。

なんかバグとかあったらコメント下さい。


ファイル

色んなパターンに備えた結果ファイルが多いです。用途によってどれか一つをお使い下さい。

PHP版

  • analytics.php
  • analytics.min.php(minify)
  • analytics.tag.php(タグマネージャー用)
  • analytics.tag.min.php(タグマネージャー用minify)

オプション
PHP版では、なんでもいいのでパラメーターを渡すとセキュアなクッキーを発行します。

独自SSLを使用している場合のみ有効。フォームだけ共有SSLなどではCookieで特定することができなくなります。

JS版

JSではIPが取得できません。PHPを使えない、IPが取得できなくても良い場合や、アクセス時間がブラウザの時刻でもまあいいかという人はこちらをどうぞ。

  • analytics_cookie.js
  • analytics_cookie.min.js(minify)
  • analytics_cookie.tag.js(タグマネージャー用)
  • analytics_cookie.tag.min.js(タグマネージャー用minify)

設定

Analytics(ユニバーサルアナリティクス)の設定

Analyticsの設定からカスタムディメンションを選び、下記のように3つ追加します。インデックス番号が重要となります。

カスタムディメンション

3つとも名前だけ違うのみで設定は同じです。
カスタムディメンションの設定

Google Tag Managerの設定

Google Tag Managerを使用している場合、データレイヤー変数を3つ追加する、イベントの追加、カスタムディメンションの設定、ルールの変更をしなくてはなりません。難しい用語ばかりですが下記の通り設定すればうまくいくはずです。使用していない場合は飛ばして下さい。

データレイヤー変数の追加

Google Tag Managerでは何でもかんでもマクロというもので管理しています。このマクロに、データレイヤー変数を3つ追加します。

上記のような画面(なんでもいいのでマクロをクリックして、マクロをコピーするのが楽です)で上のような感じで

  • setIP
  • setCookie
  • setAccessTime

3つ作成して下さい。名前は固定です。

イベントの追加

先ほどのマクロの追加と同じように、マクロのタイプをカスタムイベントに設定してマクロ名をsetAnalytics_eventとして追加します。

カスタムディメンションの設定

Google Tag Managerのタグの設定メニューから、詳細設定→カスタムディメンションで設定します。
Analyticsで設定したカスタムディメンションのインデックス番号に合わせて、どれがIPでどれがCookie、どれがアクセス時間として設定するのか各自設定して下さい。

ルールの変更

Google Tag Managerではルールを設定することにより、どういった条件でタグを発火させるのかを設定することが出来ます。

ここではさきほど設定した、setAnalytics_eventというイベントが発動した瞬間にAnalyticsを呼び出す設定にしています。

以上でGoogle Tag Managerの設定は終わりです。


コードの埋め込み場所

ファイルをHTMLの指定した場所に埋め込んで下さい。

ユニバーサルアナリティクスの場合

Analyticsのタグの前において下さい。できればAnalyticsで発行されたタグをの前に置き、ファイルを直下に埋め込むとAnalyticsにデータが送信されます。

IPアドレスのインデックス番号が1Cookieが2アクセス時間が3の場合は下記のとおりです。

Google Tag Managerの場合

Google Tag Managerで発行されたタグの下に置いて下さい。公開設定を行っていればトラッキングされているはずです。

まとめ

うまくトラッキングされていればセカンダリディメンションに表示されます。あとはカスタムレポートなどで色々見ることが出来ます。

何が便利って、APIで絞ることにより1人1人のデータが簡単に取得できることです。

コンバージョンを集計するフォームにhiddenでCookieの値を入れることにより、上記のようにGmailに届いたらスプレッドシートに自動的に入力されているなんてことも可能です。フォームの値もスプレッドシートに入れることも頑張ればできます。これについては今後書くかも。

取得率は現在99.9%なので今流行のビッグデータとしても使えるかもしれませんね!!それではより良い解析ライフを〜\(^o^)/

CasperJSでAdwordsのレポートを自動ダウンロード(仮)

Adwordsのレポートはメールでcsvが送られてきません。csvさえメールで送られてくれれば何も言うことはないのですが、送られてこないのはどうしようもないので自分でやるしかないです。

PhantomJSは使ったことがあったのですが、CasperJSは使ったことがなかったため練習がてら使ってみました。

のちのちパッケージ化しようと思ってるのでサンプルだけおいときます。
サンプルはダウンロードしたcsvが文字化けします。対処方法は

casperjs download file character encoding utf8 issueを参考に該当箇所を書き換えて下さい。詳しくは次の記事でまとめると思います(多分)

コード

サイトリニューアルしたいのに全然できないのをどうにかしたい

javascriptで連想配列のキーと値を取得する

良く忘れるのでメモ