FrontPage / web

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

でした。

日本語フォント

'游明朝', YuMincho, 'ヒラギノ明朝 ProN W3','HiraMinProN-W3',"メイリオ", Meiryo;

webフォント 「Noto Snas Japanese」

notosansjapanese.jpg

→無料の日本語フォント【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」

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」

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

  1. サブセットフォントメーカーのインストール
  2. 第一水準漢字 のダウンロード
s-font_subset2.jpg

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

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

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を有効にする
  1. Google Developers Consoleにて、プロジェクトを選択するか、新しいものを作成する →Google Developers Console
gapi-1.png
  1. 「APIと認証」>「API」から"Analytics API"が有効なAPIとして登録されているか確認する。

# ref(gapi-2.png)

  • クライアントIDを作成する
  • OAuthのクライアントを作成する
gapi-3.png

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

gapi-4.png

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

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

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

じゅんびかんりょう!!

  • サンプルコードを回す
  • 先ほどの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

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: filegapi-4.png 83件 [詳細] filegapi-3.png 87件 [詳細] filegapi-2.png 45件 [詳細] filegapi-1.png 89件 [詳細] files-font_subset2.jpg 85件 [詳細] files-font_subset1.jpg 83件 [詳細] file第一水準漢字.txt 301件 [詳細] files-sourcecodepro.jpg 86件 [詳細] filenotosansjapanese.jpg 90件 [詳細]
Last-modified: 2016-06-15 (水) 07:25:14 (587d)