カテゴリー
Google

Google フォームと Google Apps Script を初めて触っての覚えておきたいことメモ♪

Google フォームを始めるには

  • Google ドライブから、新規 > その他 > Google フォーム
    Google ドライブから、新規 > その他 > Google フォーム、で作成
  • Google フォームを使って、アンケート、申し込みといったフォームを作ることができる。
  • こんな案内が表示された。Google フォームでできること。
    Google フォームでできること。1.作成。2.共有。3.送信。4.分析。

    1. 作成
      ショートカットと変更の自動保存を使うと、フォームをすばやく作成できます
    2. 共有
      他のユーザーとリアルタイムでフォームを共同作成できます
    3. 送信
      ユーザーを招待して、メールやソーシャル ネットワーク経由での回答をリクエストします
    4. 分析
      回答をスプレッドシートに送信すると、高度な分析ができます

作成した Google フォームをいじってみて

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

AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード!

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 時に必要な措置

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

【Monaca】【Onsen UI】ナビゲーション型のページのひとつに、スライディングメニューを組み込むコード

ビゲーション型のページのひとつに、スライディングメニューを組み込むアプリのページ遷移イメージ
ビゲーション型のページのひとつに、スライディングメニューを組み込むアプリのページ遷移イメージ

アプリ内容

次の内容のアプリですわ。スライディングメニューとページ移動のみの、機能は一切無いアプリとなりますの。

  • ページ一覧
    • メインページ
    • ページ1
    • ページ2
  • メインページ ←→ ページ1←→ ページ2  →メインページ …、と移動する。
  • メインページのみ、スライディングメニューを持つ。

テンプレートとコード

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

【Mac】Node.js で静的 HTML ウェブサーバだけをお手軽簡単に使う方法

コマンド

# npm の serve インストール
npm install --global serve
# 確認
serve --version
# 静的ウェブサーバ起ち上げ(ドキュメントルートに予め移動しておく)
serve
# ポート番号を指定(たとえば 3333)して、静的ウェブサーバ起ち上げ
serve -p 3333

Yeoman を使うほどでもなく、ウェブで探したサンプル HTML、CSS、JavaScript を試したい、といった時に役に立ちますわ♪

serve インストール・確認

カテゴリー
Apple

Mac に homebrew で Node.js などをインストールした方法と、nodebrew を使わなかった理由

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
カテゴリー

北大マルシェ2015の写真日記♪

まとめなど

全体の様子

カテゴリー
WordPress

【Quick Adsense】Google Analytics アクセス解析の投稿にある広告を一気に全部、地道に消す方法のメモ

本ブログは WordPress で運用しております。広告も表示しており、それには Quick Adsense プラグイン Version 1.9.2 を使用させていただいております。

Google Analytics に関する投稿に埋め込んだ広告を非表示にした作業をいたしました。Quick Adsense の動きに関することや、手順について残しておこうと思います♪

修正手順

  1. アクセス解析 | oki2a24 タグページを表示
  2. Ctrtl を押しながらアクセス解析のページリンクをクリックし、新しいタブでページを開く。
  3. 「投稿を表示」リンクをクリックし、すべての投稿で編集ページヘ移動。
    ※最初の1ページ目だけ、編集ページをテキストモードにしてから、他のページも開いていくこと。
  4. 冒頭に、「<!–NoAds–><!–OffWidget–>」をコピペする。
  5. 「更新」をクリックして変更を保存する。

わたくしたちの使用している本ブログ用のサーバはとてもスペックが低いです><。

一度に10ページも20ページも処理したいですけれども、フリーズしてしまいますので6ページ、つまり半年分ずつ処理いたしました♪

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

Windows 10 に Yeoman をインストールして、AngularJS 開発を始める環境を構築する手順

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 を導入するにあたってのポイント

カテゴリー
Microsoft

【Mac Boot Camp】バージョン 5.1 へアップデートし、トラックパッドと Magic Mouse の問題を解消できました♪ 今、Boot Camp バージョン 4.1

バージョンアップで解消できた問題

  • トラックパッドが使えるようになった。Boot Camp コントロールパネルにトラックパッドのメニューが表示されるようになった。
  • Magic Mouse の中央ホイールが使えるようになった。

これらの問題は、【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子 | oki2a24 で確認しておりました。

この度、解決できましたので手順を残しておきます♪

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

【AngularJS】一覧・詳細画面ごとのコントローラー間でデータ共有しているサンプル【Monaca】【Onsen UI】

一覧、詳細のコントローラー間でデータを共有する AngularJS アプリサンプル!

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

今まで、Monaca に Onsen UI を組み込んで AngularJS を駆使して次の 2 つのデータ共有方法を学習してまいりました♪

  • レベル1. 同じページに複数のコントローラー
  • レベル2. 異なるページに複数のコントローラー

そして、次の点を学びました。

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

実際のアプリでは、一覧画面でひとつを選択して詳細画面へ行き、編集や削除を行い、一覧画面へ戻る、そのとき詳細画面の変更内容は一覧画面へ反映済み、という動きが普通と存じます。

今回は、そのようなケースを想定して次のような仕様のサンプルを作ります。

  • 一覧画面: 一覧データはサーバから取得してメモリに保存(ただしサンプルなのでダミーの JSON ファイルを作って使う)
  • 一覧画面 → 詳細画面の移動時: サーバから詳細データを取得してメモリに保存(ただしサンプルなのでダミーの JSON ファイルを作って使う)
  • 詳細画面: 内容を変更して「変更」ボタンをタップしたら、サーバへ内容を送信し、詳細メモリ・一覧メモリの内容も更新する。(ただしサンプルなのでサーバへ変更内容は送信しない)

ネットワーク通信は実際には行いません。一覧から詳細への移動時は毎回ダミーの JSON ファイルからデータを取得いたします。したがいまして、詳細画面が表示される時は毎回同じデータです。

レベル3. 異なるページに複数のコントローラーでデータはオブジェクトの配列