ポイント
- Material Design Lite には、サーバにファイルをアップロードする <input type=”file”> タグに対応するパーツは無い。
- <input type=”file”> を実現するには、アイコンやラベルを使用して対応すること。
カテゴリー: コンピューター
Linux の悪戦苦闘記、プログラミング、WordPress、ウェブサービス、Windows、Mac などの話題ですの。
Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。
初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。
JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。
前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。
今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪
【まとめ】AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入したときのふるまい・ポイント
- ファクトリーオブジェクトは 1 つのみ存在する。
- $scope はファクトリーの参照である。
- ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
- ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される
はじめに
- Monaca で iOS アプリを作っている
- 一覧ページと詳細ページがあり、それぞれ別の AngularJS のコントローラーが紐付いている
- 一覧ページで選択したデータは、移動先の詳細ページで値を更新できる
- 詳細ページで更新した値は一覧ページの値へも反映されていてほしい
こんなことを実現したいのですけれども、コントローラー間でデータの共有ってできるのかしら？
パッと作りたいもの
- ヘッダーとそこにメニュー
- フッター
- レスポンシブ
- パスを指定するページを作りたい。
- リストデータをテーブル表示するページを作りたい。
- コードを書くというよりも、パーツをペーストすることでウェブページを組み立てたい
- インターネットとの通信はしない。
パッと作るのに使えそうなフレームワーク
Windows10 へアップグレードする前の環境
- MacBook Pro
- Boot Camp
- Windows8.1
アップグレードした時の様子
ゆっくりとメモや写真などを撮りながら進めました。
- かかった時間: 約 65 分
ポイント
- Google は HTML だけでなく、JavaScript や CSS の内容も加味して検索結果を作っている。
- JavaScript や CSS でコンテンツの表示順番などを変更できることから、人間が見る状態のページから検索順位を決めるためと思われる。
- bot によるクロールについて、WordPress のサイトで、コアとなるプログラムが入った /wp-includes/ ディレクトリは外していたが、/wp-includes/js/ だけは許可するようにした。
カテゴリー
2015年7月のアクセス解析
先月 2015 年 7 月の 1 ヶ月間の Google アナリティクスの結果です。
- ユーザー > サマリー（左に先月、右に先々月と比較表示）
- 行動 > サイトコンテンツ > すべてのページ
- 集客 > ソーシャル > 参照元ソーシャル ネットワーク
- 集客 > 検索エンジン最適化 > 検索クエリ
以上の 4 種類の Google Analytics 結果です。
具体的な症状
- タスクバーの IE アイコンをクリックするとなぜか Chrome が起ち上がる。
- そのまま利用していると、画面下に広告が常に表示される。
ウイルスなどに感染したのでしょうか？相談を受けましたの。早速調べてみました。
ヒアリング・調査
- そもそも Chrome をインストールしたかどうか記憶が曖昧
- 広告の内容が「iPhone を 100円で」といったニュアンスの内容で、非常に胡散臭い。
- Chrome の拡張機能を調べると、SnowPrice というエクステンションが入っていた。もちろん能動的にインストールしていない。
間違いなく、SnowPrice が原因ですわね。これを削除していきます。
追記。問題解決できました！
以下、追記前の本文です♪
- 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
- cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
- AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
と試行錯誤してまいりました。これらに続きまして、AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST する方法を探っております！
できませんの＞＜。
今回はせめてどのような結果となったのか、残しておきますの＞＜。
追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪
- 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
- cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
- AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
- AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません＞＜ | oki2a24
- AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード！ | oki2a24
追記終わり！
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: *’); を設定してやる。