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の投稿をブログなどに埋め込む場合の参考になれば幸いです。

スマホを売却するときはSIMロック解除をお忘れなく

こんにちわ。
リエです。
 
以前のブログで格安SIMに変えたことをご報告しましたが、このタイミングで端末も変えました。
古い端末は会社でテスト端末として使うかな?と思って確認したら必要ないとのことだったので売却することにしました。

あっ、水没はしていません。
 
いざビックカメラへ持って行って査定してもらうこと1時間。
1時間後に査定結果を聞きに行ったら、言われたひと言が「SIMロック解除されていない端末でした。」
えっ?格安SIMに変えた時の手続きでSIMロック解除されてないの?と頭の中がハテナだらけになったのですが、店員さんがめっちゃわかりやすく説明してくれました。

SIMロック解除とは?

キャリアで契約したスマホや携帯は、それぞれのキャリアのSIMでしか利用できないようにロックがかかっています。
これを解除すると他のキャリアのSIMでも利用できるようになり、通信会社の選択肢が広がります。
SIMロック解除していなくても売却できますが、SIMロック解除をしている方が高く売れます。
〈参考URL〉
https://k-tai-iosys.com/guide/simlock.php

SIMロック解除はどうやるの?

※以下はSoftbankの場合です。
SIMロック解除には時間はかかりません。とってもかんたん。
解除方法は自分でマイページ(MySoftbank)にログインして行う方法か、Softbankショップでお願いする方法とがありますが、ショップでお願いすると手数料3,240円がかかってくるので、自分行う方がいいと思います。
ただしキャリア契約をしている時にSIMロック解除を行わないと、解約後はマイページにログインできなくなるので自分ではできなくなります。
わたしは契約時に解除を忘れていたので、ショップでお願いすることになりました。
自分が悪いけど、地味に手数料が痛い・・・!
ちなみにSIMロック解除は契約した本人でなければできません。
手続きにはSIMロック解除する端末、身分証明書が必要です。(あと手数料)
〈SIMロック解除の手続きについて〉
https://www.softbank.jp/support/faq/view/14881
※売却や誰かに端末を渡す必要がなければSIMロック解除は特に必要ありません。
 
という感じで、ビックカメラの店員さんが教えてくれたのでSoftbankへダッシュ。
新iPhoneが発売された直後ということもあり予約者優先でかなり待つとのこと。(オーマイガー)
まぁ焦っても仕方ないしと思い、夕方に予約を入れて再び来訪。
余談ですが、LINEモバイルは契約者名が個人名ではなく、「LINE株式会社ウンタラカンタラ」←長くて忘れた。とでるらしく、最初法人契約ですか?と聞かれました。
違いますと答えたらショップの方が調べてくれて、無事SIMロック解除ができ端末は売却できました。
 
しかし予想以上に時間がかかって、朝に行ったのにすべて終わったのは夕方。(自分が悪いんですけど!2回目)
ちゃんとSIMロック解除してればとシュンとなっていましたが、対応してくださったSoftbankショップとビックカメラの店員さんがめっちゃ親切で優しくてとても救われました。
ビックカメラの店員さんにはまた戻ってくると思いますだけ伝えていたのですが、再度行ったら受付したままにしてくれてて、すぐに査定してくれました。また1から待つ覚悟だったので本当にありがたかったです。
 
次なにか電化製品買うことがあったら、このビックカメラで絶対買う!!と心に誓いました。
 
というわけで、端末売却を考えている方はSIMロック解除を忘れずに。

停電の一夜をなんとか乗り切った話

2018年9月4日に西日本を直撃した台風のため、住んでいるマンションがほぼまる1日停電してしまいました。
その時体験したことを綴ってみました。

停電直前

びゅうびゅうと吹き荒れる雨風の様子を窓の外に見ながら、これは停電有り得るなあという予感はありました。ぽちぽちと瞬断が発生していましたし。
念の為に手回しのLEDランタンを出したり電池式のラジオのチェックをしたりしてるうちに家中の電気が落ちました。たしか午後3時くらい。

停電になると

  • 水が停まる
    貯水タンクがマンションの上の方にある構造だとポンプで水を引き上げなければならないので、電気が停まると水も出なくなります。
  • とにかく暇
    外が明るい内は本でも読んでいればいいんですが、暗くなるとスマホいじる以外に何もすることがなくなります。とは言え暇つぶしのためにスマホのバッテリーを浪費するわけにもいかない。
  • とにかく暑い
    エアコンの冷気は停電後1時間保ちませんでした。

対処したこと

  • 寝る
    台風が過ぎ去るまでは何もできないので、時間を進めるためにひとまず寝ることにしました。目が覚めたときに停電直っているといいなという淡い期待もありましたが、それは叶わず。
  • 情報収集
    マンションのロビーに行ってみると何人か人が集まっていて、町内会の防災担当の方からの情報を教えてもらえました。
    • このマンションを含めた何棟かだけがこの辺では停電している
    • 非常用発電機が動いている間は水が出るので、燃料切れの前に風呂桶に水を貯めておいた方がいい
    • 電力会社には連絡済みだが、復旧の目途は立っていない
  • 水の確保
    地震のときと違って今回は配管の損傷の心配はないので、ロビーで聞いてきたとおりに風呂に水を張っておきました。トイレを流すときに役に立ちました。(飲料水は備蓄してあった)
  • 冷蔵庫の整理
    うちの冷蔵庫には通常の冷凍室とは別に急速冷凍室という小さい引き出しの冷凍室があるので、なまものと保冷剤(普段から冷凍室に沢山入れている)をそこにかき集めました。ちょうど買い置きの少ないタイミングだったことも幸いして、約1日の停電でも食材を傷めずに済みました。
    翌日冷凍室を開けたとき、保冷剤はほとんど溶けていませんでした。
  • ブレーカーを落とす
    停電から回復したときに備えてブレーカーは落としておきました

便利だったもの

  • 手回しのLEDランタン
    ランタンは持ち運んで良し、置いて良しという点で便利でした。
    LEDライトに水のペットボトルを被せるとランタンになるというライフハックがあるようですが、持ち運びのことを考えると専用のLEDランタンを用意しておいた方がいいと思います。
    手回し発電機能も十分使い物になりました。数分間回せば一晩保ちました。
    1台しか用意してなかったせいで2人が別行動するときに地味に不便だったので、人数分用意しておけば良かったなと思いました。
  • 小型のLEDライト
    エネループ1本で使える小型のやつです。ピンポイントで明るくしたい場合にはランタンよりこちらが役に立ちました。
  • 大容量モバイルバッテリー
    災害時用に用意していた大型(20000mAh)で充電ポート2口の奴が役に立ちました。普段持ち歩く気にならない大きさと重さですが、こういうときには圧倒的な安心感があります。

その他いろいろ

  • トイレ
    我が家のトイレは停電時用の洗浄レバーがあるのですが、説明書を良く読むと断水のときはバケツで水を流せと書いてあったので風呂の水を使いました。タンクから水を流すときに比べて沢山の水が必要でした。
  • お皿にラップ
    お皿の汚れを防ぎ水を節約するために、お皿にラップを掛けて使うというのをやってみました。うまく張らないとラップが動いて食べにくいことが分かりました。こういうのは1回やってみないと分からないものですね。
  • 備蓄食料
    暗い中カセットコンロでレトルトパックのカレーを温めて食べて思ったのは、水が貴重なときに後から喉が乾くような味の濃いものは良くない、ということです。
  • スマホのバッテリー
    大きめのモバイルバッテリーを用意していたとはいえスマホのバッテリーを浪費したくなかったので、以下のような感じで節約しつつ使ってました。
    • 基本的にフライトモードで通信オフ。使うときだけオンにする
    • TwitterやLINEでときどきこちらの状況を親しい人向けに投下。細かいやりとりはしない
    • 情報収集が必要なときだけウェブ閲覧

    一晩で15%程度の消費に抑えることができました。

最後に

今回の関西での大規模停電はこんな感じの小規模停電が多数発生したものであったため、その分復旧に時間が掛かったようです。
我が家も長期戦になることをある程度覚悟していたのですが、幸いにも翌日の夕方までには電気が戻ってきました。復旧に尽力された電力会社および現場のみなさまに感謝します。

格安SIMへの転換

こんにちわ。
リエです。
 
現在わたしはSoftbankユーザーです。
ガラケーからiPhoneに変えた時に、Softbankユーザーになったのですが、かれこれ6年ぐらい経ちます。
 
今ちょうど更新月なんですが、格安SIMに変えようかと考えています。
というのも、データ通信量が毎月結構余っているのと電話もあまりしないので今のままだと勿体ないかなと思い始めたからです。

 
というわけで、どの格安SIMにしようかと色々調べたのですが、色々ありますねぇ。
わたしが求める条件は、「電波がいい」「データ通信が早い」「音声通話つき」「現在の端末は使いたい」なので割とシンプル。
それで[IIJmio]と[LINEモバイル]の2社に絞りました。
 
2社を自分なりに色々比較しまして、基本プライベートのやり取りはLINEをよく使うので、LINEモバイルが1番適してるなということでLINEモバイルに決定!(早い
 
さっそくですが、先日手続きをしました。
ちなみにMNP転入の流れはこんな感じ。
1.現在使用しているキャリアのMNP予約番号を取得する。※MNP予約番号には有効期限があるので要注意。
2.現在利用中のスマートフォンが、対応端末なのか確認。※対応端末でなければ、格安SIMにはできません。
3.LINEモバイルへ申し込み。
4.SIMカードが送られてくるので、利用開始手続きをする。
詳しくは下記リンクからご確認ください\(^o^)/
MNPについて
MNP転入の流れ
 
MNP予約番号の取得方法は、予約受付窓口に電話するか、店舗で発行してもらう2パターンがあります。※Softbankの場合
受付窓口は混み合うので、急いでいる方は店舗へ行って発行してもらうのがいいかもしれません。
私は1回では繋がらなかったので、時間を変えて3回かけました。(割と待つので時間に余裕がある時にかけたほうがいいと思います)
 
今が更新月というのをすっかり忘れていたのですが、最近会った友人と使っているスマホの話になり、契約内容を聞かれたのでMySoftbankを見たんですよね。じゃあ今更新月やん!と気づいたわけです。
友よ本当にありがとう。めっちゃ感謝してるよ。
 
しかし2年ってすぐ来るよな〜。

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の全文になります。