MacターミナルでGithubにプッシュする際に毎回パスフレーズを聞かれる時の対処法 | Rriver
久々にGithubのリポジトリにローカルのリポジトリをプッシュしようと思ったら、プッシュするたびにパスフレーズを聞かれるようになってしまいました。なんでかなぁと思って調べてみたら、どうやらmacOSのアップデートでキーチェーンからSSHのパスフレーズを読み込まなくなってしまったようです。 Githubへのpushに限らず、SSHでリモートサーバに接続する際に毎回パスフレーズを聞かれるようになった場合にも当てはまるはずです。 以下、解決方法を見つけたので忘れないようにメモっておきます。 キーチェーンからパスフレーズを読み込む設定 ~/.ssh/configファイルに、以下を記述することで解決しました。 Host * UseKeychain yes 僕の場合、configファイルが存在しなかったので、新しく作成しました。 ※その後、またパスフレーズを聞かれるようになったことがあったので、その時
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
Gitのデフォルト・ブランチ名を変更する方法
masterやslaveといった用語が奴隷制度を連想させる ということで、自分の開発環境でも極力それらの用語は避けたいと思っています。1人でも不快な気持ちにさせる可能性があるなら使いたくないというか。それらの用語をあえて使い続ける理由もないというか。 ということで、今後、自分の開発環境ではGitのデフォルト・ブランチ名をmasterからmainにしようと思います。 Gitのデフォルト・ブランチ名を設定する Gitのバージョン 2.28 からconfigでgit initで作成するリポジトリのデフォルト・ブランチ名を設定できるようになっています。 たとえば、以下のコマンドでデフォルト・ブランチ名をmainに設定できます。 git config --global init.defaultBranch main これでgit initコマンドでリポジトリを作成する際に作られるブランチ名がmain
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
アイコンフォントの使い方と注意点
昨今のウェブ制作でアイコンの実装には何が使われているんでしょうか？ アイコンフォントが主流なんでしょうか？それともSVGアイコン？ このブログではIcoMoon で作ったアイコンフォントを使っているのですがSVGアイコンに移行しようか迷っています。 アイコンフォントにはいくつか問題があるし、サポート対象ブラウザがIE 9+ / Android 3+で行けるならSVGのほうがアクセシブルだしSVGアイコンのほうがいいなんていうCSS-Tricksの記事 もありますし、watchOS 5ではWebフォントがサポートされないそうですし。Apple Watch対応いらなくね？という話は置いておいてw やっぱり時代はSVGアイコンですかね？笑 ただ、移行する前にもう一度アイコンフォントについて整理してから判断しようと思っています。アイコンフォントは便利なんで捨て難いんですよね。 ということで、アイコ
iPad Pro用に買った極薄・軽量のコンパクトBluetoothキーボードがかなり良い
電子書籍を読んだり、情報収集したり、アイディアをスケッチするのにはiPad ProとApple Pencilの組み合わせが最高なんですけど、ガッツリ文章を書きたいときはやっぱりキーボードが欲しい。ということで、コンパクトなBluetoothキーボードをゲットしました。ドトールの小さなテーブルでも十分作業ができます（下の写真を参照）。 上海問屋の「DN-914246 Bluetooth接続 極薄・超軽量 二つ折キーボード (スタンド型ケース付) 」というやつなんですけど、折りたたみ時で165 x 130mmの大きさで厚さ13mm、重さ170gというコンパクトサイズ。しかも3,500円という低価格です（記事執筆当時）。充電2時間で40時間使えるそうですよ。 見た目も良いしキーボードの打感も値段の割にはいい感じです。キーボードは開くと結構大きいので（キーピッチは18mm）、DELETEキーが小さ
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
スマホシフトとUIデザインが情報消費に与える影響について思うこと
日経新聞 にはスマホやタブレットで新聞を読める2種類のアプリがあるんですが、UIが違うとこんなにも情報への印象が変わるというのがよくわかるいい例になっています。そして、こういったレイアウトやデザインの違いがユーザの情報消費に与える影響を紐解いておくと、今後のマルチデバイス向けの制作に役に立つと感じています。微妙なニュアンスだったりするんですけどね。 ということで、今回は日経新聞の2つのアプリに見る情報消費の違いと、それに関連して、スマホシフト がもたらすユーザの情報消費への影響について書いてみます。 では早速、2つのアプリの紹介から行ってみましょう！ 日本経済新聞の2つのアプリ 紙面ビューアー 紙面ビューアー は見た目が紙面と同じなので、紙で読むのと同じ感覚で使えます。 これは2017年2月12日の朝刊をiPadの紙面ビューアーで見たときのキャプチャです。大きさ以外は紙面そのもですね。タッ
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ
リピートボタンが見つからない！iOS 10のミュージック・アプリのUIについて考えてみる
iOS 10のミュージック・アプリで、リピートボタンを見つけられないという衝撃的な体験をしたので、将来、UIを考える際の教訓として書き残しておこうと思います。この衝撃を忘れないうちに！ 僕はアルバムをリピート再生することが多くて、iPhoneで音楽を聴く際は、ほとんどリピートにしています。ところが、先日iOS 10にアップデートしたらアルバムが一度再生されたら終わるようになってしまい、リピート再生をしようと思ったら。。。 どこにもリピートボタンが見つかりません！ iOS 10のミュージックでアルバムをリピートする方法がわからない。。。 — ryo watanabe | 渡辺竜 (@rriver) September 20, 2016 まずはライブラリ画面で探してみますが、ありません。 さすがに検索で探すとも思えないし。。。 まぁ、ここにないのはわかるとして。 じゃぁ、再生パネル（勝手に命名
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
マイクロインタラクションの共有に最適！MacやiPhoneの画面を録画してGIFアニメにする方法
アプリの世界では普通ですが、ウェブでもユーザの操作に対してちょっとした反応を返したり、システムの状況を提示する「マイクロインタラクション 」がますます重要になってきそうです。ユーザがスマホやアプリの操作に出てくるマイクロ・インタラクションに慣れてくると、無意識のうちにそういった動作をウェブにも求めるようになると思います。 下のGIFアニメはBetterTouchToolのウェブサイト で使われているマイクロインタラクションの例ですが、このようなちょっとした動作がウェブサイトの印象を変えたりしますよね。 数値化は難しい領域ですが、たとえば競合サイトとの差別化のために相対的なユーザ体験を高める施策の一つとして有効に活用できそうです。クライアントに「こんなのできませんか？」と聞かれる機会も増える気がしています。 そして、ウェブ制作においてもマイクロインタラクションの実装が増えると、今度は、それら
El Capitanで使えなくなったTotal FinderやXtra Finderの代わりはPATH FINDER 7に決まり！
El Capitanで使えなくなったTotal FinderやXtra Finderの代わりはPATH FINDER 7に決まり！ El CapitanでTotalFinderもXtraFinderも使えなくなってしまい、どうしたもんかと悩んでいたのですが、ようやく代わりになるものを見つけました。 El Capitanの人柱インストールの記事でも紹介した「Path Finder 7 」というアプリです（注: Finderの拡張ではない）。 30日間の無料トライアルがあって試してみたら結構良かったので、早速購入しました。通常$40のところ、TOTALFINDERというキャンペーンコードで半額になります（約2,500円 / 11月8日現在）。 Finderに求めていた機能以外にも面白い機能があって、2,500円払っても良い感じです。 Finderに求める機能 フォルダ間のファイルの移動などが簡
古くなったgulpのdevDependenciesを一気に更新する方法
1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。 npm-check-updates というツールが。 このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。 やり方は簡単で、まずはnpm-check-updatesをインストール： % npm install npm-check-updates -g npm-check-updatesを走らせる： % ncu すると以下のように古くなっているものを教えてくれます： % ncu gulp-newer
PostCSSってなに？導入前に知っておきたいことを箇条書きでまとめてみた
PostCSS って最近ちらほら目にするようになったけどいったいなに？と思っている方いませんか？僕はその一人です。なんとなくこんなもんかな？といった感じで曖昧にしか理解していなかったので「とりあえずこれだけ知っておけばいい」という情報を簡単にまとめてみました。 はじめに PostCSSをノートPCに例えると… SassをVAIOのようなメーカーが作ってパッケージしたノートPCに例えると、PostCSSはマザーボードからプロセッサーからケースまで、すべて自分で選んで組み立てる自作PCです。 かなり良さそう 結論から言ってしまうと、かなり良さそうなので早速使い始めて損はないと思います。大きな導入リスクやデメリットは思いあたらないし、すでにビルドツールを使っていれば導入コストも少なくすみます。少なくとも試してみる価値は十二分にありそうです。もちろん、開発体制や環境、プロジェクトの性質によるんでし
MS Edge DevのMac VirtualBox版Microsoft Edge on Win10でフルスクリーンにならない時の注意点
MS Edge DevのMac VirtualBox版Microsoft Edge on Win10でフルスクリーンにならない時の注意点 そろそろ自宅のMacBookにMicrosoft Edgeのテスト環境を作っておこうと思い、Microsoft Edge Dev（旧modern.IE） からVirtualBox用の仮装マシンをダウンロードしたんですが、なぜかフルスクリーン機能が使えなくて困りました。 同じように困っている方がいたら、以下の2点をチェックすると良いかもしれません。 VirtualBox Guest Additionsをインストールする ビデオメモリーを18MB以上にする マシン環境とインストールした仮装マシン まずは、今回の問題に出くわしたマシン環境とインストールした仮装マシンの詳細です。 マシン環境 MacBook Pro / OS X Yosemite 10.10.5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
