100arttoe

選挙期間中はタクシーがヒマになる…。

聞いたことありますか？

私は今日初めて知ったのですが。。。

　　

訪問先へと急ぎながら、タクシー乗り場へダッシュしていたときのこと。

ここの乗り場は何度も利用しているけれど、

いるときは何台もいるし、

いないときは一台もいない。

　　

…そんな乗り場でした。

　　

運良く今日はタクシーの行列が！

さっそく、一番先頭に乗り込みました。

　　

目的地に向かいながら運転手の方にきいてみました。

「一台もいないときもありますけど、今日は行列で助かりました！」

すると、

　　

選挙のときはヒマな時期だからねぇ〜

　　

…との返答。

　　

何がどう影響するの！？

と思って更に聞いてみると、

公務員の方が、飲みに行ったり外出するのを控えるのだとか。。。

不祥事を起こさないよう、細心の注意を払うのだそうです。（あくまでタクシーの運転手さん一個人による感想です）

　　

こういう法則、面白いですね〜

なにがどう、どこに影響するかわからないものです。

　　

あ、

あと、

タクシーが少なくなるのにはもうひとつ法則が。

　　

早番と遅番が交代の時間帯も、少なくなるそうですよ。

当たり前といえば当たり前。。

　　

ちなみに、14:30〜16:00 らしいですよ（ローカル情報です）。

　　

デザインで指定した文字の太さが、コーディングでは微妙に違う状態で上がってくること、ありますよね。

PhotoshopやIllustratorとコーディングでの文字の太さの指定方法が違うため、せっかくWebフォントを使っても仕上がりが一致しないということがおこります。

コーディングの指示で、font-weightまで指定するつもりでの自分用メモ。
Photoshopから書き出した画像とデバイスフォントを比較するため併記します。パソコンで閲覧専用です。

Noto Sans JP Thin = 100

▼Photoshop

Photoshop　→　Noto Sans JP Thin／フォントサイズ 16pt／行送り 32pt

▼Coding

Coding　→　font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 100;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Light = 300

▼Photoshop

Noto Sans JP Light／フォントサイズ 16pt／行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 300;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Regular = 400

▼Photoshop

Noto Sans JP Regular／フォントサイズ 16pt／行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 400;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Medium = 500

▼Photoshop

Noto Sans JP Medium／フォントサイズ 16pt／行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 500;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Bold = 700

▼Photoshop

Noto Sans JP Bold／フォントサイズ 16pt／行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 700;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Noto Sans JP Black = 900

▼Photoshop

Noto Sans JP Black／フォントサイズ 16pt／行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 900;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

 

指示用コピペテキスト

■ Noto Sans JP のfont-weight指定数値
　Thin = 100
　Light = 300
　Regular = 400
　Medium = 500
　Bold = 700
　Black = 900

 

 

Noto Sans JP に限って言えば、公式サイトの一覧状態でプルダウンをクリックしたときだけFont-weightとの対比が数値で確認できるのですが、ちょっとつかいづらいかな。クリックしてるときしか見られないからね…。

せっかくの美しいフォント、デザイナーさんの感覚、大切にするためにディレクターは文字の太さもしっかりあわせましょう！！

 

▼Google Fonts 「Noto Sans JP 」はこちらから！https://fonts.google.com/specimen/Noto+Sans+JP

 

たとえば、Webサイトにインスタグラムの写真を自動で読み込みたいとき。Sandbox ModeでInstagramのAPIを使うのが手軽です。
しかし、そのAPIを使用するための手順は全然手軽ではありません…。
ひとつずつ手順をみていきましょう。

★Sandbox Modeとは
誰でも無料で使用できる開発者モードのようなものですが、制限があります。

• 10ユーザー（client）まで
• 各ユーザーにつき、最新20件の投稿画像が取得可能
• APIの呼び出しに制限あり。説明文中のリンクが壊れており明確な記載はない。（が、どうやら1時間に200回までらしい。）

Sandbox ModeでInstagramのAPI、具体的には「Client ID」と「アクセストークン」の入手を自分用メモも兼ねてまとめます。

【 手順：1 】Instagramの開発者ページを開く

ブラウザでInstagramを開きます。
インスタグラムにログインした状態で、開発者ページ「Instagram Developer Documentation」にアクセスします。

▼Instagram開発者ページ

【手順：2】開発者登録をする

画面上部の「Manage Clients」をクリックすると、開発者の登録を求められます。
未登録の場合は登録をしていきます▼

「ウェブサイト」「PhoneNumber」「What do you want to build with the API？」　の項目を入力し、ガイドラインへの同意をチェックしたら、「Sign up」をクリックします。
電話番号を入力していますが、今のところ特に電話はかかってきていません。。

【手順：3】クライアントIDを取得

次に、「Manage Clients」で「Register a New Client」をクリックします▼

「Details」タブを選択した状態で、必須項目である「Application Name」「Description」「Website URL」「Valid redirect URIs」を入力していきます▼

「Valid redirect URIs」には少し注意が必要です。
入力後にEnterをクリックする必要があります。
Enterをクリックし、入力したURLがボタン状に変化したらOKです。
※「Valid redirect URIs」はあとで使うので覚えておきましょう
※「Resister」はまだクリックしません！

続いて「Security」タブを選択した状態で、「Disable implicit OAuth」のチェックを外し、「Resister」をクリックします。▼

これで、Client ID が取得できました。▼
※ぼかしてますが、32桁の英数の文字列です。

【手順：4】アクセストークンを取得

【手順：3】で取得した Client ID を使って、今度はアクセストークンを取得します。

下記のauthenticationURLを使います。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

「client_id」には「Client ID」、「redirect_uri」には「Valid redirect URIs」をいれてください。

つまりこういう感じです。。

https://api.instagram.com/oauth/authorize/?client_id=【ここに「Client ID」をいれる】&redirect_uri=【ここに「Valid redirect URIs」をいれる】&response_type=token

これをブラウザのURL欄に直接入れ、Enterで移動します。
いま作業しているインスタグラムの管理画面とは別に、新たなブラウザ画面（タブ）を開いて実行しましょう。

うまくいけば、下記のような画面になります。Authorize を clickしましょう。あと一歩でアクセストークンが入手できます。▼

画面が遷移し、「Valid redirect URIs」で指定したWebサイトが表示されたら、URL欄を確認します。「?token=」の後ろにある文字列が、アクセストークンですよ。▼

これで、PHPやjsなどを用いて、自分のInstagramの写真をWebサイトに自動連携したりなど、いろいろと活用ができますね！

レスポンシブサイトを作っていると、ブレイクポイントをどこにするかでものすごく悩みます。

スマホのディスプレイサイズに依存しないブレイクポイントにしよう、と思っても、やはりひととおり知っていないと始まらない、スマホのディスプレイサイズ。
ブレイクポイントを決めるための覚え書きです。

デバイス	CSS ピクセル （ points ）	デバイス ピクセル	デバイス ピクセル比	ppi	インチ
iPhone 3G	320 ✕ 480	320 ✕ 480	1		3.5
iPhone 3Gs	320 ✕ 480	320 ✕ 480	1		3.5
iPhone 4	320 ✕ 480	640 ✕ 960	2		3.5
iPhone 4s	320 ✕ 480	640 ✕ 960	2		3.5
iPhone 5／5s／SE	320 ✕ 568	640 ✕ 1136	2		4
iPhone 6／6s／7／8	375 ✕ 667	750 ✕ 1334	2	326	4.7
iPhone 8Plus	414 ✕ 736	1080 ✕ 1920	3	401	5.5
iPhone X	375 ✕ 812	1125 ✕ 2436	3	458	5.8

ちなみに、ブレイクポイントで指定する数値は、CSSピクセルを対象とするものですよ。

MacでExcel2011をいまだに使っていますが、有名なバグがあり、文字入力が異様に遅く、大変困っていました。
文字（日本語）を打つ時の「文字を打つ→変換→Enter」の一連の流れが、「文字を打つ」の段階でまず数秒待たされます。
たとえば「しゅんかしゅうとう」と打って「春夏秋冬」に変換したいとして…。
「しゅんかしゅうとう」とキーボードを打つと…、

し

しゅん

しゅんか

しゅんかし

・
・
・

画面にすべて表示されるまで数秒。スローモーションな画面の動きをじっと見守ります。
表示されたら、そこから変換…。
はっきり言って仕事になりません。

以前からこのバグはWeb上にも情報が多く、解消法とされるものを試してみたことはあるのですが私の場合そのときは解消されず、あきらめていました。

先日、久しぶりに試してみたらうまくいったので、現在は快適です。
大変ありがたかったので、やり方をここに記録しておこうと思います。

【手順】
1）Excelを終了
2）フォントの重複を解消
3）環境設定ファイルの削除
4）キャッシュファイルの削除
5）Macを再起動

1）Excelを終了

Excelを（使っていた場合は）終了させます。

2）フォントの重複を解消

フォントの重複を解消するため、アプリケーション「Font Book」を立ち上げます。

「Font Book」が立ち上がりました。

立ち上がったら左側の列にある「全てのフォント」をクリックし、真ん中列が全て選択された状態にします。

この状態でマウスを右クリックし、「フォントを検証」を選択します。

フォントの検証が終わるのを待ちます。
終わったら、「フォントを検証」ウィンドウ左上のプルダウンメニューから「警告およびエラー」を選択。

「警告およびエラー」の内容を確認します。この時点でフォントの重複は解消されているので、「フォントを検証」ウィンドウの左上のバツボタンをクリックして閉じます。

このように、重複しているものがあれば「切」となっています。
フォントの重複はこれで解消されました。

3）環境設定ファイルの削除

Finderの状態（デスクトップのどこかをクリックすればOK）で「⌘ ＋ Shift ＋ G」でウィンドウが出たら「~/Library/Preferences/」と入力・移動します。

移動したら、次の2つのファイルを探し、削除します。

com.microsoft.Excel.plist
com.microsoft.office.plist

※ファイルが壊れている場合　~.plistの後ろに英語8文字ついた0byteのファイルがあるのでそちらも削除
例）　com.microsoft.Excel.plistEGB987SF

▲参考サイト様より

これで環境設定ファイルの削除は完了です。

4）キャッシュファイルの削除

3）と同じ要領で、Finderの状態（デスクトップのどこかをクリックすればOK）で「⌘ ＋ Shift ＋ G」でウィンドウが出たら「~/Library/Caches/」と入力・移動します。

Microsoftフォルダを削除します。

これでキャッシュファイルの削除は完了です。

5）Macを再起動

Macを再起動して全ての作業完了です。
Macが立ち上がったら、Excelを立ち上げてさっそく文字を打ってみましょう！

 

▼参考サイト様「Excel2011で日本語入力のスピードが極端に遅い | 公式 Apple サポートコミュニティ」
https://discussionsjapan.apple.com/thread/10153975?start=0&tstart=0

 

IE（Internet Explorer）は、2017年現在、どこまでブラウザ対応しておけば良いのでしょう？

正解は、IE11のみ

です。

実際には2016年1月の段階で「IE11のみ」でOKではあったのですが、
IE9・10を本当に切ってよいものか、判断に迷う場面もちらほらありました。
クライアントによってはIE9・10の比率が高かったり、社内で特定のIEブラウザを使っている例もあり、「IE11のみ」にはなかなか出来なかった印象です。

今では「IE11のみ」で制作進行することも多く、Google Analyticsでブラウザを解析すると、IEの約95%がIE11。※自分調べ
過去は確かに去ったのだと安堵の思いです。

アウトプットする機会もなかったので、勉強のため、お客様への説明のためにまとめておきたいと思います。

なぜ、古いブラウザを使ってはいけないか

Windows PC のデフォルトブラウザであるIEは、Microsoftのサポート終了とともに無償セキュリティパッチが提供されなくなるため、上位ブラウザへのアップデートが必要（Windows PC 自体を買い換える必要がある場合も）だからです。

Microsoft の発表では、

2016 年 1 月 12 日以降、

サポートされるオペレーティング システムで利用できる最新バージョンの Internet Explorer のみがテクニカル サポートとセキュリティ更新プログラムを提供されるようになります。

…ということですから、常に最新に保っておかないと危ないんですね。

 

パソコン、ブラウザにもライフサイクルがある

ここ数年の概念ではないでしょうか。
パソコンは高価だから、買ったらずっと大切に使い続ける…というわけにはいかなくなってしまったのですね。
安全に使い続けるために、常に最新のサポートが受けられる製品を追い続けなければなりません。

■参考サイト

▼サポート ライフサイクル ポリシーに関する FAQ – Internet Explorer
https://support.microsoft.com/ja-jp/help/17454/lifecycle-faq-internet-explorer

▼IE10に関する ライフサイクル ポリシー
https://support.microsoft.com/ja-jp/lifecycle/search?alpha=Windows%20Internet%20Explorer%2010

 

永遠に居座るかと思われたIE6がいつのまにか消え（会社的にIE6対応をやめることになったあの日は今でも忘れられません）、IE7、IE8も消え…。（一部には生存し続けていますが）
IE9以降は新しいブラウザ…のような意識でいたけれど、気づけばそれすらもレガシーブラウザに。

常にアップデートしていかなければならないのですね。

 

■参考サイト

▼WebブラウザシェアランキングTOP10(日本国内・世界)
https://webrage.jp/techblog/pc_browser_share/

▼［＠IT様］一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期
http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html