カテゴリー
コンピューター

【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】

AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入することでコントローラー間でデータ同期を取る

【まとめ】AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入したときのふるまい・ポイント

  • ファクトリーオブジェクトは 1 つのみ存在する。
  • $scope はファクトリーの参照である。
  • ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
  • ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される

はじめに

  • Monaca で iOS アプリを作っている
  • 一覧ページと詳細ページがあり、それぞれ別の AngularJS のコントローラーが紐付いている
  • 一覧ページで選択したデータは、移動先の詳細ページで値を更新できる
  • 詳細ページで更新した値は一覧ページの値へも反映されていてほしい

こんなことを実現したいのですけれども、コントローラー間でデータの共有ってできるのかしら?

カテゴリー
コンピューター

Material Design Lite でパッとウェブページを作ったときに学んだことメモ

パッと作りたいもの

  • ヘッダーとそこにメニュー
  • フッター
  • レスポンシブ
  • パスを指定するページを作りたい。
  • リストデータをテーブル表示するページを作りたい。
  • コードを書くというよりも、パーツをペーストすることでウェブページを組み立てたい
  • インターネットとの通信はしない。

パッと作るのに使えそうなフレームワーク

カテゴリー
Microsoft

【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子

Windows10 へアップグレードする前の環境

  • MacBook Pro
  • Boot Camp
  • Windows8.1

アップグレードした時の様子

ゆっくりとメモや写真などを撮りながら進めました。

  • かかった時間: 約 65 分
カテゴリー
WordPress

サイトの CSS および JS ファイルに Googlebot がアクセスできるようにいたしました♪

Google から送られてきたメール

ポイント

  • Google は HTML だけでなく、JavaScript や CSS の内容も加味して検索結果を作っている。
  • JavaScript や CSS でコンテンツの表示順番などを変更できることから、人間が見る状態のページから検索順位を決めるためと思われる。
  • bot によるクロールについて、WordPress のサイトで、コアとなるプログラムが入った /wp-includes/ ディレクトリは外していたが、/wp-includes/js/ だけは許可するようにした。
カテゴリー
コンピューター

2015年7月のアクセス解析

先月 2015 年 7 月の 1 ヶ月間の Google アナリティクスの結果です。

  • ユーザー > サマリー(左に先月、右に先々月と比較表示)
  • 行動 > サイトコンテンツ > すべてのページ
  • 集客 > ソーシャル > 参照元ソーシャル ネットワーク
  • 集客 > 検索エンジン最適化 > 検索クエリ

以上の 4 種類の Google Analytics 結果です。

カテゴリー
Microsoft

【Windows 8.1】【SnowPrice】Internet Explorer を起ち上げたと思ったら Chrome が起動していつも広告が表示されてしまう問題に対処しました!

具体的な症状

  • タスクバーの IE アイコンをクリックするとなぜか Chrome が起ち上がる
  • そのまま利用していると、画面下に広告が常に表示される。

ウイルスなどに感染したのでしょうか?相談を受けましたの。早速調べてみました。

ヒアリング・調査

  • そもそも Chrome をインストールしたかどうか記憶が曖昧
  • 広告の内容が「iPhone を 100円で」といったニュアンスの内容で、非常に胡散臭い。
  • Chrome の拡張機能を調べると、SnowPrice というエクステンションが入っていた。もちろん能動的にインストールしていない。

間違いなく、SnowPrice が原因ですわね。これを削除していきます。

カテゴリー
Linux

AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません><

追記。問題解決できました!

以下、追記前の本文です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24

と試行錯誤してまいりました。これらに続きまして、AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST する方法を探っております!

できませんの><。

今回はせめてどのような結果となったのか、残しておきますの><。

カテゴリー
Linux

AngularJS を使って PHP へ JSON データを POST する方法

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
  4. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません>< | oki2a24
  5. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード! | oki2a24

追記終わり!

AngularJS を使用してウェブブラウザのページでボタンを押すと、サーバへ JSON データを POST して PHP で受け取ってファイルに出力したい。

AngularJS を使用してウェブブラウザのページでボタンを押すと、サーバへ JSON データを POST して PHP で受け取ってファイルに出力してみようと試みました!

苦労しましたので、記録を残しますわ♪

ポイント

  • AngularJS で サーバに JSON をポストしたところエラーとなった。
    • フロント側では、Access-Control-Allow-Origin のエラーが発生していた。
    • サーバ側では method が POST ではなく、OPTIONS となっていた。
  • クロスドメイン問題が原因だった。
    • ちなみに、異なるドメインのデータにアクセスすることを、クロスドメインという。
  • フロント側、サーバ側の両方で対応する必要がある。
    • フロント側では、config で $httpProvider の Content-Type で x-www-form-urlencoded を設定する。
    • サーバ側では、header(‘Access-Control-Allow-Origin: *’); を設定してやる。

エラーが発生した AngularJS のコード抜粋

カテゴリー
Linux

cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
  4. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません>< | oki2a24
  5. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード! | oki2a24

追記終わり!

ウェブサーバに Basic 認証をかけ、JSON の POST を受け取る PHP プログラムの準備

次のページを参考に準備いたしました。Nginx の設定内容や、JSON を扱う PHP の内容はすべてコピーで作ることができました。

次のようなテスト環境といたしましたの。

  • https://oki2a24.com/basictest/json.php へ JSON を POST
  • Basic 認証のユーザ名: basicuser、パスワード: basicpass
  • 正常時のレスポンス: {“response”:”OK”}

1.Basic 認証で失敗することを確認

カテゴリー
Linux

【Nginx】Basic 認証をかける方法手順メモ

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
  4. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません>< | oki2a24
  5. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード! | oki2a24

追記終わり!

nginx で Basic 認証をかけたいですの。まずは、静的な HTML ファイルと簡単な PHP ファイルを表示いたします。

その準備、手順を記していきますわ♪

Nginx で Basic 認証をかけるためのポイント

  • ユーザ名、パスワードを生成するのは nginx とは別のコマンド「htpasswd」を使用すると便利
  • 「htpasswd」は httpd がインストールされていれば使用可能。使えず、Apache をインストールする必要もなければ「httpd-tools」を yum でインストールすると良いとのこと。
  • Basic 認証をかけるには nginx 設定ファイルに「location パス」のディレクティブに auth_basic、auth_basic_user_file を指定すれば良い。

Nginx で Basic 認証をかける手順ポイント

  1. Basic 認証で使用するユーザ名、パスワードを記述したファイルを作成し、適切なディレクトリに置く。
  2. Nginx の設定ファイルに、Basic 認証をかけるパス、Basic 認証の有効化、認証情報ファイルの場所の情報を追記する。
  3. Nginx 設定をリロードし、Basic 認証がかかっていることを確認する。