iOSやMacで使えるショートカットアプリは、JavaScriptを実行できる。
そのようなことを聞いても
「なんとなく凄いのは分かるけど、イマイチ何ができるのか分からない…」
という方が多いと思います。
本記事では、
- JavaScriptとは何か
- ショートカットと「JavaScript」で出来ること
などについて解説していきます!
最後には、実践編としてショートカットでJavaScriptを実行していきますので、お楽しみに!
「iOSショートカットで学ぶ!プログラミング教室」全5回にわたる初級編が終わり、ついに上級編に突入します。
ショートカット作りでプログラミングの基礎を身につけた皆さんであれば、「JavaScript」などのプログラミング言語も理解し使いこなすことができるハズです。
さらなる高みを目指していきましょう。
それでは、Let’s プログラミング!
JavaScriptって何?
そもそもJavaScirptとは何かを解説していきます。
JavaScirptはプログラミング言語の一つです。
「プログラミング言語って何?」
と思う方も多いでしょう。
プログラミング言語は、”コード”を書くために必要なものです。
“コード” とは皆さんが「プログラミング」と聞くと、まず最初に思いつくあの難しそうな文章のことです。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_371,h_208/https://automa-recipe.com/wp-content/uploads/2022/02/1.jpg)
ショートカットでプログラミングをするときは、”コード”と呼ばれる難しい文章を書く必要はありません。
ショートカットがノーコードと呼ばれるツールであるからです。
しかし、より機能の優れたショートカットを作ろうと思うと、”コード”を書いてショートカットで実行する必要があります。
プログラミングと「ショートカット」アプリの関係や、ノーコードについての説明は第1回の記事で詳しく解説しているので、そちらをご覧ください。
JavaScriptは数あるプログラミング言語の中でも世界的に人気で様々な場面で使われています。
皆さんも意識的ではないにしろJavaScriptで作られたものに触れているはずです。
その汎用性の広さから、プログラミング初学者の方には最初にJavaScriptを学習することが勧められるケースが多いです。
JavaScriptを学んでおけば、Webページの見た目を整えたり・アプリを開発したり・自動化ツールを開発することなど、様々なことが出来るようになるからです。
また、ショートカットアプリで実行できるプログラミング言語はJavaScriptだけになっています。
あのAppleも他のプログラミング言語ではなくJavaScriptを選んでいるという点からも、将来性が予想できますよね。
・JavaScriptはプログラミング言語の一つ
・ショートカットで使えるプログラミング言語はJavaScriptだけ
・JavaScriptは機能面と将来性の点からプログラミング初学者にお勧め
ショートカットで「JavaScriptを実行」すると何ができる?
JavaScriptには非常に多くの機能があります。
特にショートカットと関連性が深いのは「Webページの操作」ができる機能です。
「Webページの操作」とは、スマホやパソコンのブラウザ(SafariやChromeなど)で表示しているWebページの要素を操作することです。
「Webページの要素を操作?なんだか難しそう…」と思うかもしれませんが、そんなことはありません。
なぜなら、皆さんがいつもブラウザ上でやっていることだからです。
例えば、
・あるボタンをクリックする
・ページのタイトルをコピーする
・フォームの内容を入力する
・ページをスクロールする
といったことです。
これらの操作をJavaScriptで実行することができるので
ショートカットでJavaScriptを実行すると、
・SNSの「いいね」ボタンをクリック
・ニュースサイトのタイトルを抜き出す
・いつも使うアプリのフォームに自動入力する
・読書する際、自動で速さを調節してくれる
といったことが可能になるのです。
もともとのショートカットの機能と組み合わせれば、より便利なツールを作れること間違いなしです。
夢が広がりますね。
【実践編】ショートカットで実行してみよう!
では、実際にショートカットでJavaScriptを実行してみましょう!
事前準備
① 「設定」アプリを開いて、「ショートカット」を選択します。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_265,h_457/https://automa-recipe.com/wp-content/uploads/2022/02/2-3-594x1024.jpeg)
②「詳細」をタップします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_261,h_403/https://automa-recipe.com/wp-content/uploads/2022/02/3-2-663x1024.jpeg)
③ 「スクリプトの実行を許可」をオンにします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_250,h_302/https://automa-recipe.com/wp-content/uploads/2022/02/4-2.jpeg)
これで事前準備は終了です!
続いて、実行するショートカットを作成していきましょう!
ショートカットの作成
① 新規ショートカットの作成画面を開き、検索窓に「JavaScript」と入力し、「WebページでJavaScriptを実行」アクションを追加します。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_251,h_229/https://automa-recipe.com/wp-content/uploads/2022/02/5-2.jpeg)
② 「”Webページ”に対してJavaScriptを実行」の”Webページ”をタップし、「ショートカットの入力」を選択します。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_251,h_429/https://automa-recipe.com/wp-content/uploads/2022/02/6-2-600x1024.jpeg)
③ 「“指定なし”から”任意”の入力を受け取る」の”指定なし”をタップし、「共有シートに表示」をオンにします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_248,h_421/https://automa-recipe.com/wp-content/uploads/2022/02/7-4-604x1024.jpeg)
④ 続いて、検索窓に「クイックルック」と入力し、アクションを追加します。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_242,h_168/https://automa-recipe.com/wp-content/uploads/2022/02/8-2.jpeg)
⑤ 「クイックルックアクション」が「”JavaScriptの結果”を QuickLookで表示」となっているのを確認したら、任意の名前をつけて完了。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_241,h_412/https://automa-recipe.com/wp-content/uploads/2022/02/9-2-600x1024.jpeg)
これでショートカットの作成が完了しました!
いざ、実行してみましょう!
ショートカットを実行してみよう!
① 好きなWebサイトを”Safariで”開き、「共有」ボタンをタップします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_236,h_407/https://automa-recipe.com/wp-content/uploads/2022/02/10-3-594x1024.jpeg)
② 共有画面をしたスクロールして、先ほど作ったショートカットをタップします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_238,h_411/https://automa-recipe.com/wp-content/uploads/2022/02/11-2-593x1024.jpeg)
③ アクセス許可画面がでるので、「許可」をタップします。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_237,h_407/https://automa-recipe.com/wp-content/uploads/2022/02/12-1-597x1024.jpeg)
④ 開いているサイトに貼ってある全てのURLとURL先のタイトルが表示されれば成功です!
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_243,h_414/https://automa-recipe.com/wp-content/uploads/2022/02/IMG_81C89A4778CC-1-2-601x1024.jpeg)
今回は、「WebページでJavaScriptを実行」アクションにデフォルトで設定されているものを使って実行してみました!
中身に書いてあるコードは今の段階では意味不明だとは思いますが、まずは実行できるようになることが重要です。
次回以降で「JavaScriptの基本」について解説していきます。
最終的には、簡単なコードは理解できるようになると思います。どうぞお楽しみに!
終わりに
「iOSショートカットで学ぶ!プログラミング教室」上級編の初回となった本記事では、
- JavaScriptとは何か
- ショートカットと「JavaScript」で出来ること
などについて解説しました!
プログラミング言語を使えるようになった瞬間、見える世界が一気に広がっていくのを感じていただけたと思います。
「あんなこともできるし….こんなこともできるかも…」
と妄想を膨らませながら、次回に準備して欲しいです!
次回の記事はこちら!
プログラミング教室の記事一覧
-
【経験談あり】プログラミングの基礎を理解した後、副業で稼ぐ3つの方法を解説!
-
【超簡単】iPhoneの「ショートカット」アプリでプログラミング学習を始めよう!
-
iPhoneショートカットの「スクリプティング」とは?プログラミングの基本3要素を理解しよう!
-
【徹底解説!】「変数」って何?iPhoneショートカットを作りながらマスターしよう!
-
【if文をマスターする!】iPhoneショートカットで条件分岐を完全理解しよう!
-
「繰り返す」や「リスト」をiPhoneショートカットで使いこなそう!
-
「JavaScript」とは?iPhoneショートカットで実行する方法を徹底解説!
-
JavaScriptで「変数」と「配列」を扱う方法を学習しよう!
-
「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう!
-
Web APIって何?iPhoneショートカットで活用する方法!
-
実践!iPhoneショートカットでWeb APIを使いこなそう!