カテゴリー: デザイン

Instagramの投稿を埋め込むとiPhoneで表示が大きくなる場合の対処法

Instagramの投稿をブログやサイトに埋め込んだとき、iPhoneのsafariのみ表示が大きくなり、はみ出ていることはありませんか?
AndroidやPCだとちゃんと表示できているのに…。

対処前の表示

例えばこのようなイメージです。(2018/9/20時点)

何故か埋め込んだInstagramの投稿が記事幅からはみ出ています…。

 
投稿が大きくなってしまう原因は、位置情報が長く、さらに「日本語 英語」となっている場合のようです。

iPhoneのsafariのレンダリングが原因なのか、InstagramのCSSの指定が弱いのか、具体的なところは不明です。

 

対処方法

少々強引な対処方法となるのですが、表示されるInstagramのiframe「.instagram-media」に、下記のCSSを指定すると現象を回避できます。

@media screen and (max-width: 899px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

 
こちらの内容は、「@media screen and (max-width: 899px)」で幅900px未満のデバイスのみCSSが効くようにしています。
「414px」はiPhone XS MAXの横幅です。その指定のみだと、その幅以下のiPhoneでは大きすぎますので「max-width: 100% !important;」を指定しています。
「min-width: initial !important;」は、自動で生成される「min-width」の値が大きい場合があるので初期化しています。

 

対処後の表示

上記のCSSを指定した後の表示がこちらになります。
iPhoneでも通常の大きさで表示されるようになりました。

 
いかがでしょうか?
なかなかこのような表示崩れに出くわすことはないかもしれませんが、Instagramの投稿をブログなどに埋め込む場合の参考になれば幸いです。


canvasで ”うにょうにょ動く円” を ”複数” 作ってみました

 

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装!理想の「うにょうにょ動く円」を求めて…

 

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

 

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

 

script全文はこちら

 

さっそく作り方を

 

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

 

・10個のアンカーポイントをサークル上に2次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

 

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

 

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

 

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX(ポイントの数)分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

 

円の配列については最初に定義(circles)していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

 

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

 

描画について

 

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数(実際の描画処理を行う関数)を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

 

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して2次元ベジェ曲線を描画し塗りつぶしています。最後にonloadcanvasお決まりの構文を書いてinitすれば完了です。

 

 

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた!

 

以下、scriptの全文になります。


色の見え方と色覚多様性について

こんにちは。二年目デザイナーのハナです。

 

少し先の話になりますが、色彩検定のUC(ユニバーサルカラー級)が12月から始まりますね!

私も受ける気満々なんですが、注文した公式テキストがなかなか届きません…

とはいえ試験自体はまだかなり先なので、届いてからゆっくり勉強を始めたいと思います。

 

ちょうど一年前にこのブログでもユニバーサルカラーの話をしていましたが、今回はここから更に少し突っ込んだ話をしたいと思います。

 

色が見える仕組み

人間の目は、錐体と杆体という二種類の視細胞で光を感知しています。

杆体は主に暗いところで働く視細胞です。

暗い部屋に入ったとき最初は真っ暗で何も見えませんが、だんだん目がなれてきて薄っすらと周りが見えるようになってきます。

これは暗い部屋に入ってから杆体が働き始めるまで少しタイムラグがあるためです。

杆体は一種類しかないので、杆体しか働かない真っ暗な部屋では「色」というものを感じることはできません。

 

錐体は明るいところで働く視細胞です。

杆体は一種類しかありませんが、錐体はL錐体、M錐体、S錐体という三種類に分かれています。

L錐体は赤、M錐体は緑、S錐体は青をそれぞれ感知します。

目に入ってきた物の色が、赤い光が何%、緑の光が何%、青い光が何%で構成されているのかをLMSの錐体がそれぞれ感知し、脳でそのデータを組みあわせ、そこではじめて私達は見たものの色が何色であるか理解できるのです。

 

色覚多様性

…というのは、あくまでも杆体と錐体三種類が全て働いている人の話です。

全ての人間がそうであるとは限りません。

錐体が一種類でも働いていないと、色の見え方というのは大きく変わってきます。

杆体1色覚は杆体のみが働いている状態の色覚で、非常に視力が弱いです。

暗いところで杆体は正常に働きます。

 

1色覚は杆体と錐体一種類が働いている状態の色覚です。

S錐体1色覚は視力も非常に弱いです。

 

2色覚は杆体と錐体2種類が働いている色覚です。

欠けている錐体によって、1型、2型、3型と分類されます。

 

異常3色覚は、杆体と錐体2種類が正常に働いていて、一種類が異常である色覚です。

こちらも異常のある錐体によって、1型、2型、3型と分類されます。

見え方は2色覚と非常に似ています。

 

★マークのL・Mの2色覚と異常3色覚が特に多く、その他の先天的な色覚異常はまれです。

 

以上の先天的な色覚異常のほか、事故や病気による色覚の変化や、加齢によって以前見えていたように色が見えなくなる場合もあります。

 

まとめ

いろいろな個性の人がいるように色の見え方だって多様である、というのがユニバーサルカラーを考える上で重要な、色覚多様性という概念です。

自分が見ている色と同じ色を、必ずしもすべての人が見ているわけではないと念頭に置いておくことが大切であると思います。

 

もしかしたらここまで詳しい内容はUC級の試験には出ないかも…(公式テキストがまだ届いてないのでどこまで出題されるかわからない)

でも覚えておいて損はないので、よければ頭の片隅にでも置いていただけたら良いかなと思います。

あとこの内容は色彩検定1級の内容なので、1級の試験勉強の際に少しでも役立てていただけると幸いです。

 

UC級はあまり難易度が高くないんじゃないかな〜という個人的予想ですが、油断せずしっかり合格したいと思います。がんばりましょー!


Evernoteから、レイアウトが自由なMilanoteへ。

長年使ってきたEvernote。
ブログ記事をスクラップしたり、いいなと思ったデザインやコードを集めたり、いろんなものをEvernoteに詰め込んできました。

しかし、無料版の制限ができてから「変わりのものは無いものか」とモヤモヤしていました。
有料版に切り替えて使っていましたが、せっかくお金を使うなら、もっといいサービスは無いものかと…。

 

そこで、今回、使ってみようと思っているのは「Milanote」です。

 

「クリエイティブなEvernote」と呼ばれたり、「クリエイティブな仕事のためのメモアプリ」と呼ばれたりしています。
「Google」「Apple」「Facebook」などの企業で利用されているらしいです。

 

一度使ってみようと思い、登録してみました。
100ノートまでなら、無料で使えます。

登録は簡単で「Sign up for free」から、「名前」と「メールアドレス」と「パスワード」を入力して登録するだけです。

 

画面はすごいシンプルです。
左側にあるアイテムをドラッグ&ドロップして、ノートを増やしていきます。

基本は「Board」を追加してその中に、ノートを増やしていきます。
「Board」はフォルダのようなもので、何階層も作れそうです。(10階層以上作れました。)
それと、「Board」の広さも、無限に広がっていく感じでした。

 

オフィシャルの動画を見るとイメージが付きやすいかもしれません。

動画を見ても驚いたのですが、実際に操作してみると、その自由度と速さに感動してしまい、無制限の有料版に登録したくなりました。
(月払いだと、$12.5なので、ちょっとお悩みどころ…)

 

さらに、デフォルトでテンプレートがたくさんあり、「templates」から選ぶことができます。
その豊富さと整然とされた感じに圧倒されました。

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

美しいですね…。
これらのテンプレートがデフォルトで用意されており、ドラッグ&ドロップで好きな「Board」に設置できます。
こうやって、アイディアを綺麗にまとめることに、強いあこがれを持っているので、しばらく利用してみようと思っています。

 

いきなり、「Milanote」のみするのではなく、とりあえずのメモや記録は「Evernote」や「Google Keep」を使って記録して、それを「Milanote」に移して使うといろんなことがまとまりやすいのではないかと思っています。

 


Webスクレイピングをはじめてみました(1)

 

こんにちは、長年Webデザインに携わってきましたがプログラミングがなかなか覚えられないLQヒロシです。

今回は一念発起して、流行りのPythonWebスクレイピングをしながらプログラミングを勉強していこうという試みです。

なぜWebスクレイピングなのか?

 

PHPのちょっとした修正や、jQueryを使ったクリックやリサイズの簡単なイベントぐらいはできるけど、そこから先になかなか進めない・・。デザイナーなんだしJavaScriptUI周りのエフェクトとかを実装できるようになりたいと思ってはいるのですが、UI周りってイベント同士が絡んだりすると途端に難しくなってなかなか続かないのが目下の課題だったりします。

簡単なアウトプットを段階的にこなしていって、ファンクションのまとめ方だったり、データのやり取りなどプログラミングの勘所を掴んでいけるのが理想的ですよね。

Webスクレイピングであれば、WebサービスのAPI活用・クローリングでのデータの収集、データベースへの保存や取り出し、データの加工の作成という一連の流れが小規模なカタチで勉強できるので、体系的にポイントを抑えた勉強ができそうです。データを加工するのに正規表現も使うことになりそうだし。

 

プログラミング言語はpythonを使用し、ツイッターと連携して画像を収集しギャラリーサイト作成を最終的な目標としたいと思います。

 

第一回目は、スクレイピングとPythonについてご紹介できればと思います。

そもそもWebスクレイピングとは?

 

厳密にはクローリングとスクレイピングに分けることができます。

・クローリング
WebサイトのハイパーリンクをたどってWebページを探す作業

・スクレイピング
Webページから必要な情報を抜き出し、整形し直す作業

例えば、電子書籍の販売サイトから書籍情報を抜き出して価格を比較、最安値の情報のみをまとめるなど、要するに複数のWebサイトから任意の情報だけを抜き出し、雑多なデータを整理して有益な情報にすることでしょうか。

Pythonって何?おいしいの?

 

GoogleFacebookで採用されていて、機械学習やIoTの事例も多い現在最も旬な言語とも言われていますので、おいしいです。他のプログラミング言語同様、WindowsMacOSLinuxなどのプラットフォームで動作でき、環境構築・Webシステムの開発~データ解析までひとつの言語で実現できることから世界中で広く使われています。

Pythonの特徴

 

文法が読みやすい

 

プログラムは一度書かれた後も他の人に読まれるもの。pythonでは「シンプルで読みやすいコードが書けること」という設計思想があり、コード上の装飾が極力少なくなるような記述方法になっています。少し文例を見てみましょう

実行結果:hogeです

 

このように文の終わりに閉じタグが必要なく、制御構文では影響する範囲を括弧で囲む代わりにインデントで定義。変数は代入するだけで宣言されたことになるのでとてもすっきりとして読みやすいコードになります。

Pythonってなんだか難しそうなイメージがありましたが、PHPなどと比べても別段特殊な書き方をしているわけでもなく、文法が見やすいので非常に馴染みやすく感じました。教育の現場でも採用されていたりするそうで、プログラミング初心者にも学びやすい言語だと思います。

 

・導入が簡単!

 

MacならHomebrewでインストールするだけですぐに使えました。コンパイルする必要もないので、ぶっちゃけ笑ってしまうぐらい早いですwww

(以前PHPを導入した際は、php.iniファイルの設定を調整したり、事前にDBを用意したりと面倒だった思い出があります。)

 

・豊富なライブラリ

 

Pythonには正規表現、数学関数、通信プロコトルなどの標準ライブラリが非常に豊富でインストールするだけで利用が可能です。さらにサードパーティ製のライブラリも豊富に提供されています。最近ではディープラーニング用のTensorFlowなどが有名ですね。データ解析のライブラリも強力で、スクレイピングしたデータをインフォグラフィックとして表現できたりもします。

 

それではPythonの導入方法を見てみましょう

 

Pythonは2系と3系があり、現在は3系が主流になりつつあります。2系と3系の間には互換性がありません。Macではデフォルトでインストールされていますが2系だったりするので、Homebrewで3系をインストールします。

 

 

バージョンを確認してみましょう

 

Homebrewでインストールしたものが参照されているか確認します。

と表示されれば準備は完了です。

 

では、対話方式でプログラム実行できる「インタラクティブシェル」でPythonを動かしてみます。やり方はターミナル上で「python3」と入力するだけですw

立ち上がったら上記のようなメッセージが表示され、コマンド受付状態になります。では、構文を入力してみましょう。

はい、これだけですw簡単ですw

 

終了する時は

または

これでbashに戻ることができます。

 

第一回目は以上になります。説明や導入を中心に駆け足でご紹介してきました。
まだまだ勉強中の身のため、上手く伝えられず分かりにくい部分が多々あると思いますが、次回からは実際にPythonを利用して少しでも魅力をお伝えできればと思います!