FrontPage/web のバックアップ(No.9)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
FrontPage/web へ行く。
- 1 (2015-08-11 (火) 17:46:23)
- 2 (2015-08-11 (火) 18:11:46)
- 3 (2015-08-11 (火) 22:08:27)
- 4 (2015-08-15 (土) 14:47:44)
- 5 (2015-08-17 (月) 21:36:08)
- 6 (2016-02-22 (月) 13:25:37)
- 7 (2016-03-01 (火) 20:44:28)
- 8 (2016-03-20 (日) 20:30:13)
- 9 (2016-06-08 (水) 13:45:35)

Javascript + HTML †

$(document).ready()？ $(window).load()？ †

Web †

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() {
 // 画面にある画像の大きさを取得したいよ　→　可能○
});

でした。

↑

日本語フォント †

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」 †

→無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた

→【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた

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」 †

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」 †

日本語のテキスト表示も考慮されたコーディング向けのフォント。“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フォントの軽量化 †

サブセットフォントメーカーのインストール
第一水準漢字のダウンロード
第一水準漢字.txt

サブセットメーカーを使って、フォントサイズを小さくする

元の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 †

321268087270-c6nrdep9v3suagivv821q16pi6pkadcs@developer.gserviceaccount.com

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

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

ライブラリのインストール
1. httplib2
2. python-gflags
3. google-api-python-client

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

ひとまず公式チュートリアルを通す

AnalyticsのAPIを有効にする

Google Developers Consoleにて、プロジェクトを選択するか、新しいものを作成する →Google Developers Console

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

# ref(gapi-2.png)

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

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

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

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

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

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

じゅんびかんりょう!!

サンプルコードを回す

サンプルのダウンロード
- →HelloAnalytics.py

先ほどの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の使い方

↑

ハマりポイント †

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

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

→Google Analytics query explorer →Google Analytics Cookbok

↑

Python OAuth2認証でGoogleアナリティクスの情報を取得する †

http://symfoware.blog68.fc2.com/blog-entry-1720.html