先月 2015 年 8 月の 1 ヶ月間の Google アナリティクスの結果です。
- ユーザー > サマリー（左に先月、右に先々月と比較表示）
- 行動 > サイトコンテンツ > すべてのページ
- 集客 > ソーシャル > 参照元ソーシャル ネットワーク
- 集客 > 検索エンジン最適化 > 検索クエリ
以上の 4 種類の Google Analytics 結果です。
カテゴリー
カテゴリー: コンピューター
Linux の悪戦苦闘記、プログラミング、WordPress、ウェブサービス、Windows、Mac などの話題ですの。
Google フォームを始めるには
- Google ドライブから、新規 > その他 > Google フォーム
- Google フォームを使って、アンケート、申し込みといったフォームを作ることができる。
- こんな案内が表示された。Google フォームでできること。
- 作成
ショートカットと変更の自動保存を使うと、フォームをすばやく作成できます - 共有
他のユーザーとリアルタイムでフォームを共同作成できます - 送信
ユーザーを招待して、メールやソーシャル ネットワーク経由での回答をリクエストします - 分析
回答をスプレッドシートに送信すると、高度な分析ができます
- 作成
作成した Google フォームをいじってみて
CORS を前提としたコードを書くときのポイント
- AngularJS では $http のヘッダーに ‘Content-Type’: ‘application/x-www-form-urlencoded’ を追加する。しかし、Basic 認証をはじめ、カスタムヘッダーを追加する場合、この Content-Type 追加は意味が無い。
- サーバでは、プリフライトリクエストがあった場合に対応する次のヘッダーをレスポンスに含めるようにする。
- Access-Control-Allow-Origin:* ← 許可する接続元（* はどこからでも受け入れる）
- Access-Control-Allow-Methods ← 許可するメソッド（POST など）
- Access-Control-Allow-Headers ← 許可するヘッダー（authorization や独自のカスタムヘッダーなど）
CORS = HTTP access control = クロスサイト HTTP アクセス制限、とは？
- ブラウザは、アクセスしたページ以外のドメインから何かを取ってくることを制限している。基本的にはできないようになっている。
- そのため、たとえば次のようなことができない。ローカルホスト上のウェブサーバに AngularJS のサンプルを置いたとする。ページのボタンを押したら、とあるサイトからデータを取ってきて表示する。
- ローカルホストドメインと、とあるサイトのドメインは異なる。ウェブブラウザでローカルホストのページを表示している。そのため、別ドメインであるとあるサイトのデータへのアクセスは制限される。
- これは、セキュリティ上の観点から施された、ブラウザの仕様
リクエストを送信するウェブブラウザから見た CORS 時に必要な措置
アプリ内容
次の内容のアプリですわ。スライディングメニューとページ移動のみの、機能は一切無いアプリとなりますの。
- ページ一覧
- メインページ
- ページ1
- ページ2
- メインページ ←→ ページ1←→ ページ2 →メインページ …、と移動する。
- メインページのみ、スライディングメニューを持つ。
テンプレートとコード
コマンド
# npm の serve インストール npm install --global serve # 確認 serve --version # 静的ウェブサーバ起ち上げ（ドキュメントルートに予め移動しておく） serve # ポート番号を指定（たとえば 3333）して、静的ウェブサーバ起ち上げ serve -p 3333
Yeoman を使うほどでもなく、ウェブで探したサンプル HTML、CSS、JavaScript を試したい、といった時に役に立ちますわ♪
serve インストール・確認
nodebrew ではなく、homebrew を使って Node.js をインストールした理由
- 複数バージョンの Node.js を使い分ける予定が無いため。
- つまり、最新の Node.js さえあれば良い。
- Yeoman で Angular.js 開発がしたい。Node.js そのものを使ってシステム開発はしないため、nodebrew は不要。
ちなみに、それぞれどんなものであるか、本家リンクを貼っておきます。
AngularJS 開発を効率的に進めていくために、次のものをインストールしていきます。
前提
- Mac であること。ちなみに実践したのは OS X Yosemite バージョン 10.10.5
- homebrew がインストール済み
- ターミナルで操作
コマンドまとめ
brew install node node --version && npm --version npm install --global npm@latest npm --version npm install --global yo bower grunt-cli yo --version && bower --version && grunt --version npm install --global generator-angular
本ブログは WordPress で運用しております。広告も表示しており、それには Quick Adsense プラグイン Version 1.9.2 を使用させていただいております。
Google Analytics に関する投稿に埋め込んだ広告を非表示にした作業をいたしました。Quick Adsense の動きに関することや、手順について残しておこうと思います♪
修正手順
- アクセス解析 | oki2a24 タグページを表示
- Ctrtl を押しながらアクセス解析のページリンクをクリックし、新しいタブでページを開く。
- 「投稿を表示」リンクをクリックし、すべての投稿で編集ページヘ移動。
※最初の1ページ目だけ、編集ページをテキストモードにしてから、他のページも開いていくこと。 - 冒頭に、「<!–NoAds–><!–OffWidget–>」をコピペする。
- 「更新」をクリックして変更を保存する。
わたくしたちの使用している本ブログ用のサーバはとてもスペックが低いです＞＜。
一度に10ページも20ページも処理したいですけれども、フリーズしてしまいますので6ページ、つまり半年分ずつ処理いたしました♪
Yeoman を導入する環境
- MacBook Pro (Retina, 13-inch, Late 2012)
- Boot Camp バージョン 5.1
- Windows 10 Pro
Yeoman を導入する大まかな進め方
の公式チュートリアルを途中まで実践いたします。今回の目的は環境構築ですので、Step 5: Preview your app in the browser まで行います。他には、
の「Ruby インストール」「Bundler, Compass インストール」以外も参考にいたします。
手順 0. Yeoman を導入するにあたってのポイント
バージョンアップで解消できた問題
- トラックパッドが使えるようになった。Boot Camp コントロールパネルにトラックパッドのメニューが表示されるようになった。
- Magic Mouse の中央ホイールが使えるようになった。
これらの問題は、【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子 | oki2a24 で確認しておりました。
この度、解決できましたので手順を残しておきます♪
【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】 | oki2a24 の続編となります
今まで、Monaca に Onsen UI を組み込んで AngularJS を駆使して次の 2 つのデータ共有方法を学習してまいりました♪
- レベル1. 同じページに複数のコントローラー
- レベル2. 異なるページに複数のコントローラー
そして、次の点を学びました。
- ファクトリーオブジェクトは 1 つのみ存在する。
- $scope はファクトリーの参照である。
- ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
- ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される
実際のアプリでは、一覧画面でひとつを選択して詳細画面へ行き、編集や削除を行い、一覧画面へ戻る、そのとき詳細画面の変更内容は一覧画面へ反映済み、という動きが普通と存じます。
今回は、そのようなケースを想定して次のような仕様のサンプルを作ります。
- 一覧画面: 一覧データはサーバから取得してメモリに保存（ただしサンプルなのでダミーの JSON ファイルを作って使う）
- 一覧画面 → 詳細画面の移動時: サーバから詳細データを取得してメモリに保存（ただしサンプルなのでダミーの JSON ファイルを作って使う）
- 詳細画面: 内容を変更して「変更」ボタンをタップしたら、サーバへ内容を送信し、詳細メモリ・一覧メモリの内容も更新する。（ただしサンプルなのでサーバへ変更内容は送信しない）
ネットワーク通信は実際には行いません。一覧から詳細への移動時は毎回ダミーの JSON ファイルからデータを取得いたします。したがいまして、詳細画面が表示される時は毎回同じデータです。