作成者別アーカイブ: wds

ma-bou

【css】NotoフォントをWeb fontとして使ってみよう!(圧縮編)

前回、Google先生のツンデレにより撃沈した、Notoフォント補完計画。

あんまり悔しくて8時間しか眠れませんでした。


仕方ないので、自分でフォントをアップロードするぜ!

の前にフォントファイルの軽量化もしないとね、、、という自分的メモ。

とりあえず、ダウンロード

Google先生からダウンロードしましょう。

Beautiful and free fonts for all languages – Google

右上のダウンロードボタンをぽちっと

スクリーンショット

ダウンロードされた「NotoSansCJKJP-hinted」を解凍すると

NotoSansCJKJP-hinted

・ NotoSansJP-Black.otf

・ NotoSansJP-Bold.otf

・ NotoSansJP-DemiLight.otf

・ NotoSansJP-Light.otf

・ NotoSansJP-Medium.otf

・ NotoSansJP-Regular.otf

・ NotoSansJP-Thin-Windows.otf

と、7つのウエイトがコンニチハ。

一つのファイルだけでも15MB以上あるヘビー級なので、このまま使うのはデインジャラスです。

だので、使用する文字列だけ抽出し軽量化を図ります。

 (サーバへのトラフィックを軽減し、閲覧時に少しでも早く表示されるようにしないとね。)

サブセット化してフォントファイルのダイエット

ここからは「NotoSansJP-Medium.otf」を使用してダイエット

使用するソフトは2つ

・ サブセットフォントメーカー(サブセット化ソフト)

・ WOFFコンバータ(WOFFファイル作成ソフト)

サブセットフォントメーカーを使って必要な文字列を抽出

上記2つのソフトをインストール。

サブセットフォントメーカーを起動 したものがこちら

スクリーンショット

参照から 、ダウンロード済みの 「NotoSansJP-Medium.otf」  を選択。

作成後のフォントファイルの名前もここでつける。

NotoSansCJKJP-hinted1

今回は第一水準漢字に従って、ファイルを抽出します。

第一水準漢字とは

JIS第1水準は2965字で、常用漢字1945字とその他の人名用漢字が含まれており、通常文書であればJIS第1水準の文字だけで記述できるとされている。

JIS漢字水準 とは – コトバンク.

 これさえ押えとけば最低限なんとかなっちゃうかも♪ な便利な漢字のセット。

 「フォントに格納する文字」に第一水準漢字を入力

一番下の作成開始をポチっと。

NotoSansCJKJP-hinted2

WOFFコンバータを使って変換

作成後終了後、WOFFコンバータを起動するにチェックを入れておくと

自動的にWOFFコンバータが起動してくれる親切設計。

(事前のインストールを忘れずに)

起動後、「EOTファイルを作成する」チェックを入れて、変換開始をクリック。

woffconv220

変換後のフォルダがこちら

woffconv220_1

・ NotoSansCJKjp-Medium-Subset.eot(IE対策用)

・ NotoSansCJKjp-Medium-Subset.html(表示サンプル用HTMLファイル)

・ NotoSansCJKjp-Medium-Subset.woff(上記以外ブラウザ用)

・ NotoSansCJKjp-Medium.otf(圧縮前ファイル)

・ NotoSansCJKjp-Medium-Subset.otf(圧縮後ファイル)

サイズが劇的に小さくなっているのが分かると思います。

「NotoSansCJKjp-Medium-Subset.html」をブラウザで開くと

 

sample_html

こんな感じに表示されて確認できます。

 [結論]

ずいぶんダラダラとながくなってしましましたが、先人たちの知恵&便利なツールのおかげで なんとか軽量化にすることができました。

つぎは、いよいよwebフォント化です!!

次回(自鯖編)につづく。

[参考LINK]

ちょっと話題になってたから「Google Noto Fonts」を触ってみた – WP-E(仮)Web Professional Education 日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com サブセットフォントメーカー WOFFコンバータ

ankake

【css】NotoフォントをWeb fontとして使ってみよう!(挫折編)

最近web界隈を賑わせているニクい奴。そう、Adobe + google の最強タッグが開発した「Notoフォント」ちゃん。

 

Adobe側では「源ノ角ゴシック」って言うたい!なんて細かいことは置いといて、せっかくフリーのフォントなんだからwebフォントとしても使えないのー?

google先生が提供するフォントなんだから、Google Fontsからペッと設置出来るんじゃない?

と素朴な疑問が浮かんだので、自分的メモ。

 

Google Fontsにアクセス

毎度お世話になっている、Google Fontsさんにまずはアクセス。

スクリーンショット

 

さくっと、Notoフォントを検索

スクリーンショットあるじゃない、あるじゃない notoフォントちゃん♪

 

で、今回はNormal 400と太字も使いたいのでBold 700にチェックを入れます。

スクリーンショット

 

 

HTML,CSSに設定

「3. Add this code to your website:」にあるlink~で始まるコードをコピー

スクリーンショット

 

headタグ内にペースト

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
</head>

 

 

「4. Integrate the fonts into your CSS:」の、font-family:~をまるっとコピー
スクリーンショット

 

cssで使用するフォントにfont-familyとして記述

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

 

これで、スーパービューティフルな「Notoフォント」が表示されるはず。

 

サンプルテキスト

あれ?思ったより普通だな。

Notoフォントも案外たいして騒ぐほどキレイでもないのかな?

 

ん、まてよ、、、

日本語ひらがなカタカナ、特に漢字が膨大な数であり、Webフォントのダウンロード量など、英語欧文と比較して課題がある。例として2010年にサービスを開始したGoogle Web Fontsでは日本語は提供されていない(2013年現在)。国内初の日本語対応WEBフォントサービスは、2003年5月に開設され、2010年、2011年頃から日本語に対応したWebフォントサービスが普及し始めた。
引用元: Webフォント – Wikipedia.

 

えぇーっ!!

例として2010年にサービスを開始したGoogle Web Fontsでは日本語は提供されていない(2013年現在)。

 

散々焦らしたあとの放置プレイ。
Google Web Fontsでは日本語は提供されていないだなんて。

ちゃんと調べない自分が悪いんだけどさー だってさー だってさー

 

 

[結論]
Googleフォントで、きれいな日本語webフォントがラクラクで使えてウマウマかと思いきや、そんなに世の中ウマイ話はありませんでしたとさ。

 

次回(圧縮編)につづく。

Google Design

【クラウド】googleグループを社内メーリングリストに使おう

先日、「you メーリングリストの移行と管理やっちゃってよ!」とのご依頼がありました。

そのお話のなかで

  • 一部の人が投稿出来るようにして、誰でも投稿できないように
  • 広告を出さない
  • 出来るだけ低価格
  • 分かりやすく、使いやすい

なお、メンバーの人数は50人程度で今後増えていく予定とのこと。

無料のメーリングリストを中心に、色々探してみて見つけたのが「Googleグループ」。

いっときニュースになっていてサービス自体は知っていたけど、「何それ?おいしいの?」状態だったので設定を含めた自分的メモ。

グループの作成

まずGoogleグループにアクセスしGoogleアカウントでログイン(アカウントの作成は省略)
googleグループ

gmailのアドレスとパスワードをさらっと入力

googleグループ1

のちのち管理者の変更等を考えると、既存のGoogleアカウントではなく、新規にアカウントを作った方がいいかも。

次に、グループを作成をクリック

googleグループ2

  • グループの名前
  • グループで使用したいアドレス(任意でOK)
  • グループの説明(招待状に表示されるので分かりやすいように)

を入力。

googleグループ3

 

同じ画面、下のほうにある「基本的な権限」の中にある「トピックを表示」

ここの一般公開のチェックは必ずはずしましょう

でないと、メンバー全員のアドレスが一般に公開されてしまいますー

googleグループ4

今回は、オーナーもしくはマネージャーのみが投稿できるように。

ここはすべてのメンバーに投稿を許可する場合もあるでしょう


googleグループ5

ここも参加者をオーナー側から管理したいので

「招待されたユーザーのみ」参加可能に

googleグループ6

参加できるユーザーまで設定できたら

「作成」をクリック

googleグループ7

ここでスパム対策と思われる、文字の確認。

スパムよけとしては仕方ないのでしょうが、この画面が出てくるとテンションだだ下がりなのは私だけでしょうか?

googleグループ8

 

グループに招待

無事グループが作成されたので、つづいてグループに招待します

googleグループ9

複数の招待者を指定する場合はカンマで区切ります。

入力が終わったら、「招待状を送信」をポチり。

googleグループ10
再度、文字の確認が出ますので、さきほどと同様に入力(スクショ撮り忘れ)

数分後、招待者にはこんなメールが届きます

で「承認」ボタンを押せば、登録完了!


googleグループ12


また、メンバーの追加方法には

  • メンバーからの承認を必要とする方法
  • 管理者が直接追加する方法

があります。

今回のように、メーリングリストの移行のときは、直接追加する方法でいいかも

 

設定はここで終了ですが何かあった時のために

しばらくは古いメーリングリストと並行して運営していくのが安心だよなぁ

【結論】
おおむね要望に応えるかたちで移行が出来そうです。
無料版ですと、1グループ100人までの制限があるので、いずれ乗り換える必要がありますが、その時はそのときでw