2022-04-07

Apple Watchでウェブページを閲覧する方法（ショートカットアプリ使用）

iPhone / iPadで使える「ショートカット」アプリにて、特定のウェブページをSafariで開くショートカットをあらかじめ作成し、それをApple Watchで利用することによって、Apple Watchでそのウェブページを開くことができます。その実行方法を紹介します。

iPhone / iPadの「ショートカット」アプリの操作方法

iPhone / iPadで「ショートカット」アプリを起動し、「すべてのショートカット」の画面で右上の「＋」アイコンをタップ。

次の画面で、下の方にある「Appおよびアクションを検索」と書かれている入力欄にSafariと入力。

そこにSafariと入力すると、その下に候補が表示されるので、そのなかの「Webページを表示」をタップ。

次の画面で、「のWebページを表示」と書かれている箇所の直前の入力欄に、開きたいウェブページのURLを入力。
左上のアイコンをタップすると、アイコンのイラストと色が変更できます。
アイコンの右側の入力欄には。このショートカットの名前を自由に入力できるので、開きたいウェブページの名前などを書けば分かりやすいでしょう。

（朝日新聞デジタル https://www.asahi.com を開く場合の例）

そして、右上の×アイコンの左側の丸いアイコンをタップ。

次の画面で、「Apple Watchに表示」のところのスライド式スイッチをオンにします。

ここまで出来たら、右上の「完了」をタップし、次に右上の×アイコンをタップ。

すると、「すべてのショートカット」の画面の左上に、ここで作成したショートカットが表示されています。

Apple Watchでの操作方法

Apple Watchで「ショートカット」アプリを起動します。

（Apple Watchで「ショートカット」アプリのアイコンをタップする）

すると、上掲の手順で作成したショートカットが、四角いアイコンで表示されています。これをタップします。*1

すると、Apple Watchのブラウザでウェブページが開きます。*2

（朝日新聞デジタル https://www.asahi.com をApple Watchで開いた例）

以上です。

Apple Watch SE スペースグレイアルミニウムケースとミッドナイトスポーツバンドケースサイズ：44mm GPS＋Cellularモデル本体のみ（楽天モバイル回線なし）新品

価格: 41580 円
楽天で詳細を見る

*1:ショートカットの作成後、ここに表示されるまで暫く時間がかかる場合もあります。通常は数分待てば表示されると思います。

*2:ウェブページを開くためのショートカットをApple Watchでタップするのが初回の場合は、「このURLをApple Watchで開いてもよいか」を訊ねるダイアログが出る場合があるので、「許可」をタップします。

2022-03-31

Dynalistのモバイル版のみに適用されるCSSの作成例

Dynalist CSS

Dynalistのモバイル版のみに適用されるCSSのサンプルを紹介します。

〈目次〉

必要なもの
適用される環境
CSSを適用する手順
CSSのサンプル
- フォントサイズを変更する

必要なもの

Dynalistの有料版（PRO）にアップグレードする必要があります。
なお、既存ユーザーの紹介リンク経由でDynalistのアカウントを作ると、初月のみは有料版が無料になるそうです（当ブログ筆者の紹介リンクはこちら）。

適用される環境

この記事で紹介しているCSSが適用されるのは、下記の3つの環境でDynalistを表示した場合です。

モバイルアプリ（iOS版 / Android版）
モバイルブラウザ
デスクトップのウェブブラウザでウィンドウの横幅を500px以下ぐらいまで狭めた状態

CSSを適用する手順

Dynalistの有料版（PRO）にアップグレードした後で、Dynalistの画面の右上のメニューから“Settings”を開き、“Dynalist Pro”のタブの一番下のほうにある“Custom CSS”という入力欄に、適用したいCSSを入力します。
Dynalistのモバイルアプリやモバイルブラウザから“Settings”を開いた場合は、その画面の一番下に“Custom CSS”の入力欄があります。

CSSのサンプル

フォントサイズを変更する

Dynalistのフォントサイズは、設定画面（Settings）でSmall / Medium / Largeの3段階から選べるようになっており、そこで指定したサイズがデスクトップとモバイルの両方に適用されるのですが、デスクトップでは丁度よいフォントサイズだけれどもモバイルでは小さすぎる／大きすぎるとか、その逆になるという場合があると思います。
そこで、モバイル版のフォントサイズのみを変えるCSSを作ってみました。

変えられるのは、本文、note、H1, H2, H3のフォントサイズです。
初期状態では、設定画面でのフォントサイズ指定がSmallである場合に、モバイル版でSmallより若干大きくなるようにしてあります。

フォントサイズを調整したい場合は、それぞれの行のfont-size:○○pxのところの数値を自由に変えて下さい。

/*本文 フォントサイズ*/
body.is-mobile div.Node-children div.node-line{font-size:18px !important}

/*note フォントサイズ*/
/*設定画面でフォントサイズをMediumやLargeに指定している場合は、.is-smallFontのところを.is-mediumFontや.is-largeFontに変える*/
body.is-mobile .is-smallFont .Node-noteContainer{font-size:14px !important}

/*H1 フォントサイズ*/
body.is-mobile div.is-heading1 div.node-line{font-size:25px !important}

/*H2 フォントサイズ*/
body.is-mobile div.is-heading2 div.node-line{font-size:23px !important}

/*H3 フォントサイズ*/
body.is-mobile div.is-heading3 div.node-line{font-size:20px !important}

アウトライナー実践入門「書く・考える・生活する」創造的アウトライン・プロセッシングの技術 / Tak. (Book) 【本】

価格: 2178 円
楽天で詳細を見る

2022-03-03

Scrapboxのブックマークレットが機能しないときのチェックポイント

Scrapbox ブラウザ JavaScript

Scrapboxのブックマークレット（“Scrap to ○○”）が機能しないときに、チェックするとよいところを紹介します。

ブラウザのブックマークに追加したScrapboxのブックマークレットをマウスで右クリックして「編集」（Firefoxなら「ブックマークを編集」）を選択すると、下記のような画面が表示されます。

（Firefoxでの例。Chrome系ブラウザでも同様の表示が出ます）

この中の「URL」の欄の文字列を見ると、冒頭のほうに、次のような箇所があると思います（●●●の部分には当該のScrapboxのプロジェクト名("Project name")が入るので、各人ごとに異なっています）。

window.prompt('Scrap "●●●" to

この●●●の部分に半角のシングルクォーテーション'（＝アポストロフィ）が含まれている場合は、それを消したうえで「保存」の操作をすれば、ブックマークレットが機能するようになります。

なお、筆者はこの●●●に含まれる半角のシングルクォーテーションを消すと直るという経験しかしていませんが、同じ箇所で半角のシングルクォーテーション以外の文字が原因となっている場合もあるかもしれません（筆者はJavaScriptの素人なのでよく分かりません）。

備考

上述の●●●はScrapboxの"Project name"と同じ文字列です。
"Project name"はScrapboxの設定画面の中のSettingsのタブから確認・変更できます。ここで"Project name"を変更した後でブラウザのブックマークに追加したブックマークレットには、その変更が自動で引き継がれていると思います。

Scrapbox情報整理術 [ 倉下忠憲 ]

価格: 2343 円
楽天で詳細を見る

2022-02-22

ブラウザの拡張機能“Stylus”の使用例（3）Dynalistのメニュー内の各機能を非表示にする

CSS ブラウザ Twitter Evernote Dynalist Stylus

ブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの外観を変えることができます。
この記事では、その使用例として、Dynalistのメニューの中にある任意の機能を非表示にするCSSを紹介します。

Stylus自体の使い方の解説は、下記の記事をご覧ください。

〈目次〉

概要
- 非表示にしたサンプル
各メニューを非表示にするためのCSS
関連記事

概要

PC版のブラウザでDynalistを開いて、各項目の行頭にマウスカーソルを合わせると、≡の形のアイコンが現れ、それをクリックすると、下記のようなメニューが表示されます。
このメニューの中の不要なものを、画面上に表示しないようにします。

非表示にしたサンプル

各メニューを非表示にするためのCSS

メニュー内の各項目を非表示にするためのCSSは、下記のとおり約50個あります。
なお、これらを1つにまとめた状態のCSSをGistに置いてあります。CSSの全体を一挙にコピーしたい場合はそちらからコピーするほうがラクだと思います。

Collapse

li.MenuItem--collapse{display:none !important}  /* Collapse */

Collapse All

li.MenuItem--collapseAll{display:none !important}  /* Collapse all */

Expand

li.MenuItem--expand{display:none !important}  /* Expand */

Expand all

li.MenuItem--expandAll{display:none !important}  /* Expand all */

Expand to level

li.MenuItem--expandToLevelParent{display:none !important}  /* Expand to level */

Level 1

li[data-level="1"]{display:none !important}  /* Level 1 */

Level 2

li[data-level="2"]{display:none !important}  /* Level 2 */

Level 3

li[data-level="3"]{display:none !important}  /* Level 3 */

Level 4

li[data-level="4"]{display:none !important}  /* Level 4 */

Collapse all siblings

li.MenuItem--collapseSiblings{display:none !important}  /* Collapse all siblings */

Expand all siblings

li.MenuItem--expandSiblings{display:none !important}  /* Expand all siblings */

Zoom in

li.MenuItem--zoomIn{display:none !important}  /* Zoom In */

Add note

li.MenuItem--addNote{display:none !important}  /* Add note */

Delete

li.MenuItem--deleteNode{display:none !important}  /* Delete */

Delete checked items

li.MenuItem--deleteCheckedNodes{display:none !important}  /* Delete checked items */

Add to bookmarks

li.MenuItem--bookmarkNode{display:none !important}  /* Add to bookmarks */

Sort

li.MenuItem--sortChildren{display:none !important}  /* Sort */

Title (A to Z)

li.MenuItem--sortTitleAsc{display:none !important}  /* Title (A to Z) */

Title (Z to A)

li.MenuItem--sortTitleDesc{display:none !important}  /* Title (Z to A) */

Date (new to old)

li.MenuItem--sortDateDesc{display:none !important}  /* Date (new to old) */

Date (old to new)

li.MenuItem--sortDateAsc{display:none !important}  /* Date (old to new) */

Unchecked first

li.MenuItem--sortCheckedStatusAsc{display:none !important}  /* Unchecked first */

Checked first

li.MenuItem--sortCheckedStatusDesc{display:none !important}  /* Checked first */

Edited (new to old)

li.MenuItem--sortEditedTimeDesc{display:none !important}  /* Edited (new to old) */

Edited (old to new)

li.MenuItem--sortEditedTimeAsc{display:none !important}  /* Edited (old to new) */

Created (new to old)

li.MenuItem--sortCreatedTimeDesc{display:none !important}  /* Created (new to old) */

Created (old to new)

li.MenuItem--sortCreatedTimeAsc{display:none !important}  /* Created (old to new) */

Reverse current

li.MenuItem--reverseCurrent{display:none !important}  /* Reverse current */

Search and replace...

li.MenuItem--searchReplace{display:none !important}  /* Search and replace... */

Indent

li.MenuItem--indent{display:none !important}  /* Indent */

Unindent

li.MenuItem--unindent{display:none !important}  /* Unindent */

Move to...

li.MenuItem--moveNode{display:none !important}  /* Move to... */

Insert template...

li.MenuItem--insertTemplate{display:none !important}  /* Insert template... */

Add checkbox

li.MenuItem--showCheckbox{display:none !important}  /* Add checkbox */

Add checkbox to children

li.MenuItem--addCheckboxToChildren{display:none !important}  /* Add checkbox to children */

Remove checkbox

li.MenuItem--hideCheckbox{display:none !important}  /* Remove checkbox */

Remove checkbox to children

li.MenuItem--removeCheckboxFromChildren{display:none !important}  /* Remove checkbox to children */

Check off

li.MenuItem--check{display:none !important}  /* Check off */

Uncheck

li.MenuItem--uncheck{display:none !important}  /* Uncheck */

Number Children

li.MenuItem--makeNumberedList{display:none !important}  /* Number children */

Stop numbering children

li.MenuItem--unmakeNumberedList{display:none !important}  /* Stop numbering children */

li.MenuItem--shareRootNode{display:none !important}  /* Manage sharing... */

Get link

li.MenuItem--getLink{display:none !important}  /* Get link */

Show all references

li.MenuItem--showReferences{display:none !important}  /* Show all references */

Export...

li.MenuItem--exportNode{display:none !important}  /* Export... */

Set as inbox

li.MenuItem--setAsInbox{display:none !important}  /* Set as inbox */

Color label（項目ごとの背景色）

ul.set-color-label-menu{display:none !important}  /* Color label */

見出し化ボタン（H1, H2, H3）

ul.set-heading-level-menu{display:none !important}  /* 見出し化ボタン */

Stylusの使用例を紹介した記事として、こちらもあります。

アウトライナー実践入門「書く・考える・生活する」創造的アウトライン・プロセッシングの技術／Tak．【3000円以上送料無料】

価格: 2178 円
楽天で詳細を見る