FrontPage / web

* Javascript + HTML [#w975e88e]

** $(document).ready()? $(window).load()? [#vc38b667]

*Web[#jca802d4]
readyはDOMが構築されたら実行される。

 $(document).ready(function() {
  // Handler for .ready() called.
 });
これは次のよく見かける省略形と同じ。

 $(function() {
 // Handler for .ready() called.
 });

loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。

 $(window).load(function () {
  // run code
 });
そのため

 $(document).ready(function() {
  // 画面にある画像の大きさを取得したいよ → できません×
 });
 $(window).load(function() {
  // 画面にある画像の大きさを取得したいよ → 可能○
 });
でした。

** 日本語フォント [#cd799877]

 '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3','HiraMinProN-W3',"メイリオ", Meiryo;
- Noto Snas Japanese
- Source Code Pro
- Source Han Sans
- Source Sans Pro
-- AdobeがGoogleと共同開発したオープンソースのフォントファミリー[1]。日本語名は源ノ角ゴシック(げんのかくごしっく[2])
- Source Han Code
-- https://github.com/adobe-fonts/source-han-code-jp/releases/tag/2.000R

** webフォント 「Noto Snas Japanese」 [#mb3a60ae]
#ref(notosansjapanese.jpg,,50%);
[[→無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた>http://11neko.com/font-2/]]

[[→【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた>http://11neko.com/font-3/]]

cssファイルにgoogleからフォントをインポートします
style.cssに以下を追加

 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

各要素にフォントを適応します(cssの最後に呼び出すとすべてに有効になると思います←確認様までに)

 *{
  font-family: 'Noto Sans Japanese', sans-serif;
  }

Noto Sans Japanesは細いとさらにカッコ良いので、適度にfont-weightを設定しておきます。

  *{
   font-weight: 100;
   font-weight: 200;
   font-weight: 300;
   font-weight: 400;
   font-weight: 500;
   font-weight: 600;
   font-weight: 700;
   font-weight: 800;
   font-weight: 900;
  }

** webフォント 「Source Code Pro」 [#y1619b6f]

#ref(s-sourcecodepro.jpg)

[[https://www.google.com/fonts#UsePlace:use/Collection:Source+Code+Pro ]]



 @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

 *{ 
    font-family: 'Source Code Pro';
  }

** webフォント 「source-han-code-jp」 [#w5f99ba2]
日本語のテキスト表示も考慮されたコーディング向けのフォント。“Adobe Source”シリーズの派生フォントとして公開されている。Adobe社がオープンソースで開発した「Source Code Pro」と「Source Han Sans JP(源ノ角ゴシック JP)」を組み合わせて、両者が調和するようにサイズやウェイトなどを調整したもの。
[[https://github.com/adobe-fonts/source-han-code-jp]]
https://github.com/adobe-fonts/source-han-code-jp/releases/tag/2.000R
** Webフォントの軽量化 [#z844ec10]
+ サブセットフォントメーカーのインストール
+ 第一水準漢字 のダウンロード
#ref(第一水準漢字.txt)

#ref(s-font_subset2.jpg,,)
サブセットメーカーを使って、フォントサイズを小さくする
#ref(s-font_subset1.jpg,,)
元の16MBから、圧縮後の-compだと、700KB程度に

使い方。(/fonts配下に設置した場合)
 @font-face {
    font-family: 'NotoSansCJKjp-Light';
    src: url('./fonts/noto.woff'),url('./fonts/noto.eot');
 }
 
 body {
    font-family: 'NotoSansCJKjp-Light';
 }


** Google Analystics API [#x06bd2db]

321268087270-c6nrdep9v3suagivv821q16pi6pkadcs@developer.gserviceaccount.com

PythonでGoogle Analytics APIを使うためにやること

[[Python で Google Analytics API を使うためにやったこと>http://ytsuda.hateblo.jp/entry/2013/10/18/195742]]

- ライブラリのインストール
++ httplib2
++ python-gflags
++ google-api-python-client

 sudo pip install httplib2
 sudo pip install python-gflags
 sudo pip install google-api-python-client


[[ひとまず公式チュートリアルを通す>https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/service-py]]


- AnalyticsのAPIを有効にする


++ Google Developers Consoleにて、プロジェクトを選択するか、新しいものを作成する
[[→Google Developers Console>https://console.developers.google.com/project]]


#ref(gapi-1.png)

++ 「APIと認証」>「API」から"Analytics API"が有効なAPIとして登録されているか確認する。

# ref(gapi-2.png)


- クライアントIDを作成する

-- OAuthのクライアントを作成する

#ref(gapi-3.png)

アカウントはサービスアカウントを選択

#ref(gapi-4.png)

これで、秘密鍵ができ、jsonファイルがダウンロードされます。

-- 「新しいP12キーを生成」もクリックしておく。

client_secrets.p12みたいなファイルがダウンロードされる。名前をそれにしておく。(チュートリアルでよびだすので)


じゅんびかんりょう!!

- サンプルコードを回す

-- サンプルのダウンロード
--- [[→HelloAnalytics.py>https://developers.google.com/analytics/resources/samples/service-py.txt]]

-- 先ほどのclient_secrets.p12を同じフォルダに入れておく。

-- HelloAnalytics.pyのクライアントID・メールアドレスを自分のものに変更する。


error
 
  oauth2client.client.CryptoUnavailableError: No crypto library available

いろいろ調べていると、インポートエラーが発生していた。

  ImportError: No encryption library found. Please install either PyOpenSSL, or PyCrypto 2.6 or later


-- PyOpenSSLのインストール

 sudo pip install PyOpenSSL


error

 returned "User does not have any Google Analytics account.">


[[→初心者でも分かる!なGoogle Analytics APIの使い方>http://syncer.jp/google-analytics-api-tutorial]]

** ハマりポイント [#w6758065]

- Google Analytics の「アナリティクス設定」
-- google developers Consoleにて取得したemailアドレスを、アカウント・プロパティ・ビューのすべてでアクセス許可する必要がある。

-- ビューの「すべてのウェブサイトのデータ」の名前を適当に「AllView」とかにしてあげれば良い。



[[→Google Analytics query explorer>https://ga-dev-tools.appspot.com/query-explorer/]]
[[→Google Analytics Cookbok>https://developers.google.com/analytics/devguides/reporting/core/v3/coreDevguide?hl=ja]]


**Python OAuth2認証でGoogleアナリティクスの情報を取得する [#j1e7dd24]
http://symfoware.blog68.fc2.com/blog-entry-1720.html
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS