開始行:
* 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-...
- Noto Snas Japanese
- Source Code Pro
- Source Han Sans
- Source Sans Pro
-- AdobeがGoogleと共同開発したオープンソースのフォントフ...
- Source Han Code
-- https://github.com/adobe-fonts/source-han-code-jp/rele...
** webフォント 「Noto Snas Japanese」 [#mb3a60ae]
#ref(notosansjapanese.jpg,,50%);
[[→無料の日本語フォント【Noto Sans Japanese】があまりにも...
[[→【Noto Sans Japanese】ブログの記事を綺麗なフォントで表...
cssファイルにgoogleからフォントをインポートします
style.cssに以下を追加
@import url(http://fonts.googleapis.com/earlyaccess/noto...
各要素にフォントを適応します(cssの最後に呼び出すとすべて...
*{
font-family: 'Noto Sans Japanese', sans-serif;
}
Noto Sans Japanesは細いとさらにカッコ良いので、適度にfont...
*{
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:So...
@import url(http://fonts.googleapis.com/css?family=Sourc...
*{
font-family: 'Source Code Pro';
}
** webフォント 「source-han-code-jp」 [#w5f99ba2]
日本語のテキスト表示も考慮されたコーディング向けのフォン...
[[https://github.com/adobe-fonts/source-han-code-jp]]
https://github.com/adobe-fonts/source-han-code-jp/release...
** 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.g...
PythonでGoogle Analytics APIを使うためにやること
[[Python で Google Analytics API を使うためにやったこと>h...
- ライブラリのインストール
++ 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.goo...
- AnalyticsのAPIを有効にする
++ Google Developers Consoleにて、プロジェクトを選択する...
[[→Google Developers Console>https://console.developers.g...
#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/an...
-- 先ほどのclient_secrets.p12を同じフォルダに入れておく。
-- HelloAnalytics.pyのクライアントID・メールアドレスを自...
error
oauth2client.client.CryptoUnavailableError: No crypto l...
いろいろ調べていると、インポートエラーが発生していた。
ImportError: No encryption library found. Please instal...
-- PyOpenSSLのインストール
sudo pip install PyOpenSSL
error
returned "User does not have any Google Analytics accoun...
[[→初心者でも分かる！なGoogle Analytics APIの使い方>http:...
** ハマりポイント [#w6758065]
- Google Analytics の「アナリティクス設定」
-- google developers Consoleにて取得したemailアドレスを、...
-- ビューの「すべてのウェブサイトのデータ」の名前を適当に...
[[→Google Analytics query explorer>https://ga-dev-tools.a...
[[→Google Analytics Cookbok>https://developers.google.com...
**Python OAuth2認証でGoogleアナリティクスの情報を取得する...
http://symfoware.blog68.fc2.com/blog-entry-1720.html
終了行:
* 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-...
- Noto Snas Japanese
- Source Code Pro
- Source Han Sans
- Source Sans Pro
-- AdobeがGoogleと共同開発したオープンソースのフォントフ...
- Source Han Code
-- https://github.com/adobe-fonts/source-han-code-jp/rele...
** webフォント 「Noto Snas Japanese」 [#mb3a60ae]
#ref(notosansjapanese.jpg,,50%);
[[→無料の日本語フォント【Noto Sans Japanese】があまりにも...
[[→【Noto Sans Japanese】ブログの記事を綺麗なフォントで表...
cssファイルにgoogleからフォントをインポートします
style.cssに以下を追加
@import url(http://fonts.googleapis.com/earlyaccess/noto...
各要素にフォントを適応します(cssの最後に呼び出すとすべて...
*{
font-family: 'Noto Sans Japanese', sans-serif;
}
Noto Sans Japanesは細いとさらにカッコ良いので、適度にfont...
*{
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:So...
@import url(http://fonts.googleapis.com/css?family=Sourc...
*{
font-family: 'Source Code Pro';
}
** webフォント 「source-han-code-jp」 [#w5f99ba2]
日本語のテキスト表示も考慮されたコーディング向けのフォン...
[[https://github.com/adobe-fonts/source-han-code-jp]]
https://github.com/adobe-fonts/source-han-code-jp/release...
** 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.g...
PythonでGoogle Analytics APIを使うためにやること
[[Python で Google Analytics API を使うためにやったこと>h...
- ライブラリのインストール
++ 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.goo...
- AnalyticsのAPIを有効にする
++ Google Developers Consoleにて、プロジェクトを選択する...
[[→Google Developers Console>https://console.developers.g...
#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/an...
-- 先ほどのclient_secrets.p12を同じフォルダに入れておく。
-- HelloAnalytics.pyのクライアントID・メールアドレスを自...
error
oauth2client.client.CryptoUnavailableError: No crypto l...
いろいろ調べていると、インポートエラーが発生していた。
ImportError: No encryption library found. Please instal...
-- PyOpenSSLのインストール
sudo pip install PyOpenSSL
error
returned "User does not have any Google Analytics accoun...
[[→初心者でも分かる！なGoogle Analytics APIの使い方>http:...
** ハマりポイント [#w6758065]
- Google Analytics の「アナリティクス設定」
-- google developers Consoleにて取得したemailアドレスを、...
-- ビューの「すべてのウェブサイトのデータ」の名前を適当に...
[[→Google Analytics query explorer>https://ga-dev-tools.a...
[[→Google Analytics Cookbok>https://developers.google.com...
**Python OAuth2認証でGoogleアナリティクスの情報を取得する...
http://symfoware.blog68.fc2.com/blog-entry-1720.html
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
