AngularJSで外部APIをたたく際に発生するクロスドメイン問題を攻略できたのでメモ

AngularJSで開発をしていて外部API（Yahooさんのテキスト解析）を叩くことがありまして、クロスドメイン問題にハマったのでメモ。

いやー勉強することは無限ですな。。
結論から言うと、これでえええの、、！？って感じで解決したので、詳しい方いらっしゃったらください。

クロスドメイン問題

クロスドメイン問題とは、まあググればアホみたいに出てくるのでそちらを見ていただければいいんですが、、。
簡単に言うと、Ajaxでブラウザから別サーバーにアクセスするのは基本的にはできへんで！っていうものだそう。セキュリティ上の問題だそう。

今回の場合だと、ローカル→YahooさんのサーバーはNGということ。
んまあどっかのサーバーにあげてたとしても、Yahooさんのサーバー出ない限りNG。

くぐり抜ける方法がいくつかあるらしいです。
参考：
http://tigawa.github.io/blog/2013/10/09/webapi/
http://d.hatena.ne.jp/satosystems/20140108/1389173683

クロスドメイン問題の攻略法

'Access-Control-Allow-Origin' ヘッダを付与※外部APIたたくときこれは基本無理

上の参考記事に書いてることそのままですが、API を提供するサーバ側を修正しなければならないため、今回ののような他社のサービスを利用する場合はNG。

JSONPでアクセスする

var url = "https://example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

基本的にこれで全部解決みたいですね。
ドットインストールでAngularJSからYoutubeのAPIたたくときもこれでやってました。

ただ問題がひとつ。
_JSONでデータを返してくれないAPIには対応してない、、！_んですね。
今回使おうとしていたAPIがYahooのテキスト解析APIがxmlにしか対応しておらず、、、。
なのでこれでは攻略できないという結論に至りました。

jQueryプラグインを使う

ここにも書いていますが、jQueryのプラグインを読み込ませるだけで解決するそう。
ただ、書いてあるとおりやっても何故か解決できなかったので断念。
部分的にjQueryで書いたら行けた。みたいな記事もあったので試しましたがこれもダメで、、、。

このプラグインの中身、実はYahooAPIをたたいて一旦Yahooにアクセスさせて、JSONPで情報を取り出しているそう。
ってことで、結局JSONPに対応していない外部APIをたたくのは無理。。なるほど。

CORSをつかう

JSONPが使えない場合でも、CORSという仕組みを使えば攻略できるそう。
ただ、これも対応しているしていないの問題があるそうで、
そこには注意が必要です。

いろいろやり方があるそうですが、ここに書いてありますが、単純にたたくAPIのURLにcrosproxyのURLをかまして、プロキシサーバーを経由するようにするだけで可能なんだとか。簡単すぎw

var url = "https://example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

こう書いていたところを、

var url = "https://www.corsproxy.com/example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

これでOKだそう。
なんかセキュリティ的にどうなん？とか、ここのサーバー落ちたら終わりやん？とかいろいろ思いますが、一旦これでOKとしました。

まとめ

・JSONPもしくはCORSに対応していないと基本的に無理
・JSONPに対応してるときは、上の「JSONPをつかう」で解決。
・JSONPに対応していないときはCORSをつかうことになる。上の「CORSをつかう」で解決。
・どっちにも対応していない場合は、Ajaxで外部APIはたたけません！サーバー側でたたくようにする！（たぶん）

aタグのクリックイベントをGoogleアナリティクスで正しく計測できない

めちゃくちゃ久しぶりに更新します。

さてさて、今回はGoogleアナリティクスについて。

弊社のサマーインターンシップ用ランディングページを作ることになって。
いままでのLPはPV数だけ取得するためにGoogleアナリティクス入れてたんですが、今回はクリックイベントだけでもしっかり目に計測しようと思い、前々から気になっていた表題の件について調べましたのでメモ。

イベント計測について

現状、Googleアナリティクスでは、2通りの書き方があるらしく、

  • クラシックアナリティクス

こちらが昔からある記法。ただ、どんどん下記のものに移行していくらしい。
※参考 http://analytics-ja.blogspot.jp/2013/10/blog-post.html

  • ユニバーサルアナリティクス

こちらが、去年の夏頃から使われている記法。上述したものよりもシンプルに書ける上に、APIと併用することでかなりカスタマイズして利用できるそう。
詳しくは以下記事に書いてあるので参考に。
公式レファレンス https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja

って、ことで
なんか良さそうなのでユニバーサルアナリティクスを使ってます。

aタグのクリックイベント計測漏れについて

このへんの記事をみると、どうやらアナリティクスのjavascriptの処理を待つ前にリンクしてしまうことが原因で起こるらしい。。
で、解決法。

いろいろ調べた結果、2つの方法があるとのこと。

hitCallback関数を利用する

こちらを使うとアナリティクスの計測後にイベント発生をさせることができるとのこと。

<a onclick="ga('send', 'event', 'カテゴリ名', 'アクション名', { hitCallback: function () { document.location.href = 'http://example.com/'; }}); return false;">サイトへのリンク</a>

実際にやってみましたが、
・なぜか、href属性をつけてると先にリンクに飛んでしまうようで、、、ｗ外すとすんなりいきました。
・ただhref属性を外すとhoverしたときのポインターが効かなくなるようで、、ｗなのでcss側で改めて設定しました。
・hitCallback関数内のリンク先は相対パスでもOKです。

って感じで攻略できました。
ただ、ユーザーが「別タブで開く」の動作ができなくなるので、場合によってはまずいですね。

onClickでなくonMouseDownを利用する

こちらを使うと、リンクより前にアナリティクスの計測を実行してくれるそう。

<a href="http://example.com/" onMouseDown="ga('send', 'event', 'カテゴリ名', 'アクション名', true);">サイトへのリンク</a>

これはすんなりいきました。

ただ、mouse downなので右クリックでも計測されてしまうという欠点あり。
これもこれでちょっと悩ましいですね。。

まとめ

参考リンクそのままですが、、、
・前提として、イベントトラッキングは計測漏れが発生します。aタグは特に。
・hitCallback関数は別タブで開くが効かなくなるので、ユーザビリティが犠牲になる。
・onMouseDownは右クリックも計測してしまうので、正しい数値よりも少し上回って計測してしまう。

といったところでしょうか。
別タブで開かれる可能性の高い参考リンクなどは、絶対的にonMouseDownのほうが無難ですね。。。
それ以外の部分でも、onMouseDownのほうがユーザビリティを重視すると無難そう。

TwitterAPIを使ってタイムラインの取得、投稿（おまけ：画像付きも）してみた

TwitterAPIをたたいて、タイムラインの取得や投稿をするPHPプログラムについてまとめておきます。

以下参考にしたURLですので、ご参考までにどうぞ！
・http://www.tryphp.net/2011/09/27/utopics-phptwitteroauth1/#1
少し古い記事ですが、TwitterAPIの使い方からタイムラインの取得等まで
すごく丁寧に書いてありました。

・http://www.webopixel.net/php/666.html
上の記事にかぶる部分もありましたが、上の記事が古いこともあって、
上との両記事を参考に実践しました。

・http://yadorogi-soft.net/?p=304
こちらは画像付き投稿について。


アプリ画面を作る

webアプリ画面を作る

TwitterAPIをたたいて取得したタイムラインを表示する画面や、投稿を行うためのボタンを表示する画面を用意します。
といっても、単純にPHPファイルを作成し、localhost内に保存しておけばOKです。

サーバー上にアプリ画面のファイルをアップロードしておく

このあと、Twitter OAuth認証させるときに、
「どこのWebサイト上でAPIをたたきますか？」を指定するために、Webサイトという項目を設定しなければなりません。
（ウェブアプリケーションとして使用する場合は、これがサービスサイトになる。）
なので、サーバー上にアップロードしておきましょう。


Twitter OAuth認証をさせる

アプリの登録を行う

アプリ画面ができたら、次はアプリの登録を行います。
まずはhttps://apps.twitter.com/にアクセスしてTwitterログインをします。

ログインできたら、Create a new applicationをクリックして新しいアプリを作ります。
新しいアプリを作る際、以下の項目を聞かれるので、ひとつずつ入力してください。
・Name
Twitterアプリケーションの名前です。自由につけられます。
・Description
Twitterアプリケーションの説明文です。これも自由に書けます。
・Webサイト
Twitterアプリケーションのウェブサイトです。
上記でアプリ画面を作ってサーバーにアップロードしたとおもいますが、そのURLでOKです。
・CallbackURL
ウェブアプリケーションとしてOAuthを利用する際に、認証後に飛ぶURLです。これは入力任意。
僕はひとまず入力しませんでした。

これでアプリの登録については完成です。

アクセストークンの取得

次にアクセストークンなるものを取得します。
これは、TwitterのAPIに接続するための鍵のようなものです。
登録したアプリにいって、API Keysというタブを選択してYour access tokenでCreate my access tokenをクリック！
簡単ですね。

余談ですが、ここに表示されている
・API key
・API secret
・Access token
・Access token secret
の4つでOAuth認証を行います。ですので、このページは閉じずにおいておきましょう！

Twitter OAuth認証を利用するためのスクリプトを用意、アップロードする

abrahamさんが提供しているOAuthライブラリ「twitteroauth」を使用します。
以下のURLから最新版ファイルをダウンロードしてください。
URL:https://github.com/abraham/twitteroauth
ダウンロード：https://github.com/abraham/twitteroauth/downloads

※こちらの記事にはバージョン0.2.0をダウンロードと書いてありますが、その通りにやって僕は動かなかったです。。。（少し古い記事だからでしょうか。。）
最新版では動いたので、最新版をお勧めします！

ダウンロードしたファイル「twitteroauth」の中に二つのファイルがあります。
twitteroauth/OAuth.php
twitteroauth/twitteroauth.php

これらを使用します。

アップロードする場所ですが、
ドキュメントルート直下に「twitterouath」フォルダを用意し、その中に格納します。

以上！
あとはアプリケーションのコードを書いていけばおしまいですね！


アプリケーションのコードを書く

僕自身がPHPを使っている事もあって、今回はPHPで書きます。
ってところですが、実はこちらの参考にしたサイトにすべてコードが載っているので、そちらを参照にしていただけると、、！

  • 11- ホームタイムライン取得のサンプルコード

と書いているところ以降ですね！
以上でできちゃいます！


画像付きTweetについて

画像付きTweetはこちらのURLを参考にしました。
画像付きのTweetは先ほどTwitterOAuthではできないため、tmhOAuthという認証方法を使います。
詳しくはこちらにコードが載っているのでチェック！






以上です。

初めてAPIをたたいてみたのですが、結構簡単？にできました。
もっと応用していろいろできるようになりたいなー。

おしまい。

WordPressの構築について<Part2 サイトの構成について>

さて、前回の更新から1週間経ってしまいましたが、引き続きWordPressの構築についてログをまとめていきたいと思います。

今日は、オリジナルのテーマを作成していく導入手順を書きたいと思います。 進めるにあたって、ブログとともにWordPressのコミュニティポータルがかなり参考になったので、URLをのせておきます！ 困ったらここ見たら何とかなった気がする。http://wpdocs.sourceforge.jp/Main_Page

オリジナルのテーマを作成していく準備

「WordPressの構築を始める≒自分なりに機能をカスタマイズしたオリジナルのテーマをつくる」ってことなので、基本的には、 wp-content/themes/の中に新しくディレクトリを作り、その中にhtmlやcssなどをつくっていきます。 ※おそらく、熟練していくと、それ以外のファイル情報等も弄くり回して管理画面とかもカスタマイズしていくんでしょうが、、、。まずはここからですね（´・ω・｀）

僕は、ここにoriginalというディレクトリを作成しました。

index.php、style.css、functions.phpの3ファイルは必須！

まずオリジナルのテーマを作成するにあたり、必ず必要なファイルが以下の3ファイル。

index.php

一番初めにアクセスされるファイルですね。これが必須なのは簡単なWebページでもつくった事のある人には分かるでしょう。

style.css

このファイルは、ページのレイアウトやデザインを形作るだけでなく、作成するオリジナルのテーマの基本情報も記録するものなので、必須です！

functions.php

このファイルは、テーマ全体に対しての操作をする関数をまとめておくファイルです。 （●●機能を追加したりだとか、、、。） WordPressには、標準で用意されている関数（参考:http://goo.gl/sCCt）がたくさんあるので、 それをそのまま用いたり、時にはそれらを組み合わせて自分で関数を組み立てたり、などなど。

以上です。 この3ファイルがあればテーマとして一応動きます。 てか逆に言うと、この3ファイルがないとテーマが動きません。てか認識されません。 cssなんかはなくても動きそうなもんですが、必須なんですね。注意が必要です（｀・ω・´）

作成したテーマをアクティブに設定して編集を進める

次に作成したテーマをアクティブにします。（選択？します。）以下、手順。

まずは管理画面に行きましょう。

localhost/サイトのディレクトリ名/wp-admin/にアクセス。 今後ここでの操作も並行して進める事になるのでここからはずっと開きっぱなし。

サイドメニューから外観>テーマへ、作成したテーマをアクティブにします。

管理画面にアクセスしたら、ここでつくったテーマが反映されているはずです。 ここで選択しちゃいましょう！簡単！（｀・ω・´）

さて、これで作成したオリジナルのテーマを搭載したサイトが出来上がりました！ あとは、これをどんどんカスタマイズしてけばよし！！

って感じで作成しました。 次回からは、かなり話が膨らんじゃいそうなので、 作成を進めていく中での気付きとかを中心にまとめる事になると思います。 できるだけ、当たり前の事は書かずに、感動したことをピンポイントで書ければなと。

おわりです。

WordPressの構築について<Part1 WordPressの導入>

こんにちは。
技術ブログ2回目の更新です。

更新が滞っていたのは、自己最多14ページに渡るWebサイトを制作していたためです。
少し大変でしたが、基本的にフォームやスマホ対応等がなかったため、
比較的簡単に制作できました。


さて今日は、
WordPressを用いたWebサイト構築について、シリーズで書いて行きたいと思います。

個人的にもHTML5、CSS3、PHP、Javascript（jQuery）が
だいぶ使えるようになってきた感があるので、それを使ってより実践的な部分に入っていこう！
みたいな感じでWordPressを使っていろいろやってみたいと思います。

まずは、WordPressをスタートさせるところから実践したことを記していきます！＾＾
参考にしたサイトは以下です。

  • WordPressのダウンロード及びインストールについて
    http://www.adminweb.jp/wordpress/install/index4.html
  • MySQLに関するコマンドがまとめてあります。
    コマンドって使ってないとかなり忘れちゃったりするのでこちらを参考にしました。
    http://www.bitscope.co.jp/tep/MySQL/quickMySQL.html
    http://dev.mysql.com/doc/refman/4.1/ja/mysql.html


    • それでは、さっそくスタート！
    いかに実践した手順をまとめます。

    WordPressファイルをダウンロード

    ■ WordPressのWebサイトからファイルを一括してダウンロード
    http://ja.wordpress.org/
    上記URLからWordPressのファイルをダウンロードします。

    WordPressを使うときに編集するファイル（HTMLファイル、
    CSSファイル、その他設定ファイル等）が全部入っていて、
    これをwordpressのサーバーまたはレンタルサーバー等にアップするイメージです。
    ダウンロードしたら、Webブラウザで開けるようにlocalhost上に保存します。

    WordPressで使うMySQLの設定

    WordPressファイルをダウンロードできたら、
    今度はWordPressで使うデータベースの作成をMySQLで行います。
    ※MySQLがまだPCに入っていない方は、別途入れてからスタートしてください。

    さて、ターミナルを開いて（Windowsの方はコマンドプロントかな？）
    以下の操作をするコマンドを打っていきます。
    ■ ユーザーの登録
    ■ データベースの登録
    ■ パスワードの登録

    wpファイルの初期設定

    以上ができれば、いよいよWordPressにログインしていきます。

    Webブラウザ（Chromeとか）を開いて、
    アドレスバーにlocalhost/wordpress/wp-index.phpと入力します。
    そうすると、WordPressを始めるための設定画面が立ち上がるので、
    以下の手順に従って対応していきます。

    wp-config.phpを編集

    ■ MySQL上で設定したデータベース、ユーザー名、パスワード名、
    　ホスト名（だいたいの場合がlocalhostだと思いますが）になるようデータを編集。

    wp-index.phpにアクセスしてWordPressのインストールを進める

    ■ サイトのタイトル、ユーザー名、パスワード、メールアドレスを
    　入力してインストールを行う。


    以上です。
    これで、WordPressの導入は完了です。

    引き続きWordPressの構築を進めていきます。
    ではまた。

    HTML/CSSを超効率的に書くためのEmmet/Compassを入れてみた！

    こんにちは。

    はじめて技術ブログを書きます@tacmarine0820です。

    よろしくお願いします。

     

    さて、記念すべき技術ブログ第1回目は、

    HTMLを超効率的に書くことができるという噂のEmmetと、

    CSSを超効率的に書くことができるという噂のCompassを

    導入してみた記録をしたいと思います。

     

    Emmetは、HTMLの文法上の規則性をムダな部分だけ取り除いて簡略化したもので、

    とにかくコーディング速度があがるという代物。

     

    Compass、簡単に言うと、HTMLみたいに階層構造でCSSが書けたり、

    PHPみたいに変数とかファイルとか呼び出したりしながらCSSが書けるという代物。

     

     

    どちらもフロントエンジニアには必須ツールということで、導入してみましたーー。

     

    以下、参考にした記事、、

    【Emmet】

    ・http://leko.jp/archives/442

    ※Emmetを入れるのに必要なSublime Text2のPackage Controlの導入は下記記事を参照

      http://www.sigesaba.com/2012/10/sublime-text2-package-control.php

     

    【Compass】

    ・http://howtohp.com/css/compass.html

    ・http://liginc.co.jp/designer/archives/11623#a10

     

     

    やったことは記事に書いてあることしかやってないので、

    省略しますが、これはかなり使えそう！

     

    慣れるまではちょっと時間かかりそうやけど、

    爆速コーディング目指してガンガン使ってこー。 

     

    以上短いブログでしたが、今後もどんどん書いていきます！