はてなブックマーク

コーディングをしていて、スクロールバー自体の横幅を取得したいときがあったので、取得方法についてまとめておきます。 macOSで常にスクロールバーが表示されるようにするmacOSでは設定によってはスクロールバーが表示されないこともあります。 ［システム環境設定］→［一般］の「スクロールバーの表示」で変更できます。 スクロールバーの幅を取得する1. CSSで取得する方法スクロールバーが表示されている場所がページ全体に対しての場合は、下記の記述で取得できます。 calc(100vw - 100%);100vwはビューポートの横幅全体が取れるのでスクロールバーを含む横幅、100%はbodyタグの横幅100%が取得できるのでスクロールバーを含まない横幅が取得できます。 それらの差をcalcで計算して取ることでスクロールバーの取得ができます。 100vwはビューポートの横幅になるので、ページ全体に対し

前置き最近MacBook Proを購入して、古いMacBook Proから移行作業を行いました。 自分の場合はMacの移行をするときはTime Machineなどの移行ツールは使わず、最初からセットアップしています。 というのも、移行ツールを使えばラクかもしれませんが、せっかく新しいMacBook Proになるので過去の余計・不要なデータや、もう使わなくなったものは移行のタイミングでリセットしたいからです。 丸々移行しておいて、後から不要データを消す方法もありますが、自分の場合は新しくセットアップして、そこに必要なものを入れておく方が気持ち的にラクです。 どれが不要でどれが必要なデータか、どこまで見てなにで判断すればいいか分からない…とにかく大変間違って必要なデータも消してしまったらどうしよう…新しくセットアップして入れていく方式だと、最低限必要な環境を整えておけば、あとから必要に応じて都

Macのテキストエディタ.appの代わりのテキスト編集ソフトとして有名なのがJedit。 特に文章の細かい編集に最適です。 今まで自分はテキストファイルを触るときは、ほぼMarkdown形式だったのでMacDownを使用してきましたが、最近テキストファイルも触るようになったため、この機会にJeditを導入してみることにしました。 パッと見普通のテキストエディタですが、細かい機能が盛りだくさんです。 Jeditのバージョン

今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。 というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、gulpfile.jsがかなり複雑になりがちです。 package.jsonにある程度まとめて記述することで、管理するファイルも少なくなり、開発環境もシンプルになります。 今回はそんなnpm-scriptsで、SCSSのコンパイル方法についてまとめておきます。 npm scriptsを使う準備gulpを使ったことがある人であれば問題ありませんが、npmを使う必要があるのでNode.jsをインストールしている必要があります。 過去にいくつか記事にしているので、まだインストールしていない人はそちらを参考にインストールしてください。 現時点では、nodenvを使ってインストールするのをオススメしています。

最近iOS Safariで起きた現象とその対処法についてまとめておきます。 ブラウザ表示のトラブルといえばIEでばかり起きるもののイメージがあったのですが、最近意外とSafariで見たときに「あれ？」となることが増えてきました。 横幅が足りなくて改行されているのではなく、明らかに横幅は余裕があるのに、最後の1文字だけが改行されてしまいました。 原因としては下記のようなことがあるみたいなのですが、自分の場合はdisplay: inline-block;でフォントサイズを14pxで文字数が全角13文字のときに発生しました。 display: inline-block;を指定しているfont-feature-settings: "palt"を指定している文字列が全て全角文字前後に空白がある（コード上の空白も含め）しかも、iPhone長押しでテキストの選択をすると1行で選択されるので、あくまで要素

この記事の要約こちらのリンクから、iOSのショートカットを追加するSafariでYouTubeを開いてショートカットを実行すると、好きな速度で再生ができるYouTubeアプリで「後で見る」や「再生リスト」に追加して回って、視聴はSafariから行うと便利 自分は普段オーディオブックを聞くときは3.5倍〜4倍速で聞いているので、YouTubeも見るときはそれくらいのスピードにしたいと思っていました。 ただ、デフォルトのYouTubeでは最高で2倍速にしか設定できません。 PCの場合は、Chrome拡張機能の「SmaSurf」を使えば4倍速にできますが、iPhoneだと拡張機能は使えないので諦めていました。

最近ロゴやアイコンであれば、SVGにするのが主流になってきました。 ただ、SVG画像は他の画像に比べて画像の保存が面倒です。 今回はそんなSVG画像を簡単に保存するためのChrome拡張機能「svg-grabber」の紹介です。 svg-grabberのインストール svg-grabberのインストールはChromeウェブストアからインストールできます。

前回の記事でポモドーロテクニックについての概要を説明しましたので、「ポモドーロテクニックってなに？」という方はそちらをご覧ください。今回はポモドーロテクニックを実践するために必要となるアプリやサービスをまとめました。人によって合う・合わないがあるので、試せるものは試して1番合う方法を選ぶのがベストではありますが、とりあえずの参考にしてください。iPhoneアプリiPhoneアプリではBe Focusedが1番使いやすいです。無料版と有料版のBe Focused Proがあり、有料版だと広告も外れます。使い方も非常にシンプルですし... 自分はApple Watchを持っていて、できればそれを活用したかったのでずっとBe Focused ProをApple Watchで起動して使っていました。 ただ、コンプリケーションに追加できないので、わざわざアプリ一覧から起動しないといけないのが不満でし

Googleカレンダーで「毎月31日」に設定すると、うまいこと月末に合わせてくれそうですが、実際は31日が存在しない2月（28日）や3月（30日）にはイベントが表示されません。 今回紹介する方法を使えば、月末にイベントを表示できるようになります。 ただし、カレンダーをエクスポートして無理矢理テキストエディタで編集する方法なのでデメリットも多いです。 Googleカレンダー上で編集が完了しない追加するたびに同様の手順を踏む必要がある再編集が面倒あとから修正しなさそうな、決まったイベントの場合は設定しておいても良さそうです。 月末のイベントの設定設定の流れは下記の通りです。 Googleカレンダーで「月末」に設定したいイベントを作成Googleカレンダーをエクスポートテキストエディタで編集GoogleカレンダーへインポートGoogleカレンダーで「月末」に設定したいイベントを作成まずは月末に設

:hoverと:activeでの挙動の違い疑似クラスの:hoverを使うと、ホバー時のスタイルが適応できて、:activeを使うとクリック時のスタイルの適応ができます。 それぞれの疑似クラスの区別を整理すると、下記のようになります。 :hover = 要素にマウスカーソルが乗っているときのスタイル:active = 要素をクリックしたときのスタイルしかし、スマホの場合はマウスカーソルがないため、下記のような挙動の違いが出てきます。 :hover = タップ後、違う要素がタップされるまでのスタイル:active = タップ中のみのスタイルそのため、スマホで何かをタップするときはホバーとアクティブが順に適応され、ホバーのスタイルに関しては他の要素がタップされるまでスタイルが残り続けます。 See the Pen :hover and :active by Masakazu Saito (@31

Alfred 4の無料版でできることと有料版でできることの違いを一覧にしたかったので、まとめてみました。 無料版と有料版の違い有料版のAlfredの機能はPowerpackという名前にまとめられています。 Powerpackを使用するためには通常ライセンスだと£25（約3,500円）で、メガサポーターが£45（約6,000円）が必要です。

ランチャーアプリとして非常に便利なAlfredですが、完全にデフォルトのまま使用するよりも、ひと手間設定を加えるだけで更に使いやすくなります。 今回は、そんな細かくてつい忘れがちなAlfredの設定についてです。 Alfredに関する細かい紹介は以前記事にした事があるのでそちらをご覧ください。 数字の間にコンマが入っていても計算できるようにするAlfredでは四則演算が可能です。ちょっとした計算をする時にさっとAlfredを開いて計算できるので地味に助かる機能なのですが、デフォルトのままだと数字の間にコンマ（,）が入っていると計算してくれません。 どこかから数字をコピーして計算したい時に、いちいちコンマを消すのは面倒です。 そこで、管理画面の[Features]→[Calculator]を開いて、「Ignore thousands grouping separator」にチェックを入れれば

Visual Studio CodeではデフォルトでGitの管理機能がサポートされています。わざわざGitのGUIアプリと切り替えたり、ターミナルと行ったり来たりしなくてもいいので、こまめなコミットがしやすくなります。今回はVisual Studio Codeを使った、最低限のGit操作方法についてまとめておきます（Gitはある程度理解している人向けの記事になります）。Git SCMの表示Visual Studio CodeでGit機能が使えるサイドバーのことをGit SCM（Gitソース管理マネージャー）と言います。.gitフォルダが入っているフォルダをVisual Studio Codeで開くと...

この記事の要約「zenkaku」をVisual Studio Codeにインストールして、コマンドパレットからEnable Zenkakuで全角スペースをハイライトできる常にオンにしたい場合は、ホームディレクトリの.vscode/extensions/mosapride.zenkaku-◯.◯.◯/extension.jsを開いて、var enabled = false;をtrueに変える コードを書くのに慣れていない人によくあるのが、いつの間にか全角スペースを入力してしまって、コードが動かなくなってしまうこと。 「コードは間違っていないはずなのに何故か動かない！」「これだからコーディングは嫌いなんだよ！」このようになってしまうのは、もったいないことです。 ちょっとしたミスを減らすことで余計なつまづきが減り、学習効率も上がります。 そもそも全角スペースを無意識に入力できないようにするできる

「EvernoteSpotlightは、キーチェーン内の”Evernote”に保存されている機密情報を使用しようとしています」というダイアログボックスを非表示にする方法 最近、「EvernoteSpotlightは、キーチェーン内の”Evernote”に保存されている機密情報を使用しようとしています」がちょくちょく表示されるようになりました。 毎回パスワードを入力して「常に許可」を押しているのですが、何度も表示されてしまいます。 作業中に前触れもなく突然ダイアログボックスが出てくるとびっくりしますし、自動化のマクロがうまく動作しない原因にもなるので、なんとか解決したいです。 対処1（効果なし）：フルディスクアクセスをオンにするまずはじめに、フルディスクアクセスがオンになっていないのが原因かな？と思いました。 ［システム環境設定］→［セキュリティとプライバシー］→［フルディスクアクセス］を開

1PasswordとAlfred（Power Pack必須）を持っている人であれば、その2つの連携はやっていて損はありません。 簡単な設定しておくだけで、Alfredから1Passwordに登録されてあるアカウントを検索して、サイトを開けるようになります。 1Password側の設定1Passwordの［環境設定］→［詳細設定］を開き、「サードパーティ製のアプリとの統合を有効にする」にチェックを入れます。 1Password側の設定はこれだけです。 Alfred側の設定Alfredの環境設定の［Features］→［1Password］を開いて、「Enable 1Password Bookmarks」にチェックを入れます。 この時、「Show in default results without keyword」にチェックが入っていると直接ログイン情報の検索ができますし、チェックを外してい

作業効率化に大きく貢献してくれているアプリケーションのご紹介というかまとめになります。毎日行うような事はどんどん楽にしていきたい今回紹介するアプリはどれも自分が日常的に行う作業を効率的にしてくれたり、ストレスを軽減してくれます。毎日行うような作業は少しでも楽にしたいですよね。人や業務内容によっては毎日行う事や必要とするものは変わってきますので、「絶対これを使うのがいい！」と断言できるわけではありませんが、少なくとも自分はこのアプリなしではいられないなと思うものを選びましたので、参考にして貰え... Karabiner-Elementsはキーバインドのカスタマイズができるアプリ Karabiner-Elementsはキーバインドのカスタマイズ（リマップ）ができるアプリです。 これを使うことによって「caps lockをcontrolに変更する」といったことが実現できます。 ちなみに、Kara

下の画像はウインドウを取り込んだ画像と、ウインドウの影を消した（optionキーを押しながら撮影した）画像の比較です。 また、controlキーを押しながら撮影する事でクリップボードにコピーできます。クリップボードに保存した画像はcommand + Vでチャットツールなどに貼り付けられます。この方法を使えばローカルに画像が保存されないため、不要な画像をFinder内にためなくて済みます。 スクリーンショット.appmacOS Mojaveからはアプリケーションフォルダの「ユーティリティ」内に「スクリーンショット.app」というアプリが追加されています。 このアプリを起動するショートカットキーが、先程の表にもあったcommand + shift + 5です。 「画面全体の取り込む」「ウインドウの取り込む」「選択範囲を取り込む」の選択が可能な他、画面収録への切り替えや保存先の変更も可能です。

Alfredはデフォルトのままの設定だと検索ボックスがメインのディスプレイでしか表示されません。 僕の環境は13インチのMacBookProにモニターを接続しているのですが、基本的に大きい方のモニターに主要アプリを置いてMacBookProの方にはサブのアプリやブラウザを置いているような状態です。そんな状態だとAlfredを起動する度にわざわざ視線を移動させなければなりません。 細かいことなのですが、自分はアプリケーションの起動はほぼすべてAlfredで行っていますし、ワークフローも最近使いだしたのでAlfredの起動回数が多いので、溜まってくると地味にストレスです。 そこで設定を見てみると普通に設定がありました。英語切り替えの時もそうでしたが、きちんと設定見ていくとストレス無くなる設定項目がいっぱいです。 設定方法まずはAlfredの環境設定画面へ行きます。環境設定へはメニューバーのAl

自分はDashというスニペットアプリを使っていたり、Keyboard Maestroでスニペットを展開するマクロを作っていたりもしますが、Alfredでもスニペットの作成は可能です。使い分けが難しいのですが、今回はAlfredのスニペット機能についてまとめてみます。スニペット機能の使い方スニペット機能は［環境設定］→［Features］→［Viewer Hotkey］で設定したキーを入力してスニペットの画面を出します（デフォルトでは何も設定されていません）。もしクリップボードの設定で「Show "All Snippets" at top of Clipboard History」に... スニペットアプリを使う理由自分の場合、スニペットアプリを使う理由は下記の3つです。 同じような内容を何度も手入力したり、前の内容を探して毎回コピペする手間と時間が減る手入力によるタイプミスが減るスニペット