iPhone Android アプリ横断検索 をつくってみた

作ってみました javascript でブックマークレットを!

なんかパソコンで探したかったので!

iPhone Android アプリ横断検索

iPhone と Android アプリを横断で検索します。


(() => {
  const word = window.prompt("Enter the keyword.");
  if (word) {
    const q = encodeURIComponent(`${word} site:play.google.com OR site:apps.apple.com`)
    const url = `https://www.google.com/search?q=${q}`;
    window.open(url, "_blank");
  }
})();

以下、圧縮版ブックマーク登録用。


(()=>{var a=window.prompt("Enter the keyword.");a&&(a=encodeURIComponent(`${a} site:play.google.com OR site:apps.apple.com`),window.open(`https://www.google.com/search?q=${a}`,"_blank"))})();

ボタンに付けてみた。押してみてね!

気に入ったアプリを見つけたら、ブラウザの機能を使って、その端末へそのまま送ると良いです。

気に入ったアプリを見つけたら、ブラウザの機能を使って、その端末へそのまま送ると良いです。
👉 スマホのChromeで閲覧中のWebページをパソコンへ送信する方法【iPhone & Android】 

👉 GitHub Gist に置いた Javascript をブックマークレットとして実行する 
👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方 


GitHub Gist に置いた Javascript をブックマークレットとして実行する

普通に、document で読み込んだら使えませんし。

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec."

ちょっとしたコードをシェアするのにGistは便利ですが、HTMLとしてそのままブラウザに表示したり、JSONとして利用するには少々難があります。レスポンスヘッダのContent-Typeがtext/plain固定なので、Rawデータにアクセスしてもソース表示に。

👉 GistのHTMLを直接表示する方法 - Qiita 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

禁断の eval() 使います。

👉 eval() - JavaScript | MDN 


(
  () => {
    fetch('https://gist.githubusercontent.com/path/to/raw/script.js')
      .then(response => response.text())
      .then(script => eval(script))
  }
)();

通信部分は Future な Promise でシンプルに書くことができます。

👉 Fetch の使用 - Web API | MDN 

思ってたより良い進化をしてる javascript に驚きました。

まずは、一つの Gist を書き換えながら、ブックマークをポチポチしながら作りますか。

おまけ

ついでに、Gist の URL をまとめておきます。


[top]
https://{main_host}/{user_id}/{gist_id}

[edit] *
https://{main_host}/{user_id}/{gist_id}/edit

[raw latest] *
https://{raw_host}/{user_id}/{gist_id}/raw/[{file_name}]

[raw permanent]
https://{raw_host}/{user_id}/{gist_id}/raw/{revision_id}/[{file_name}]

そのうちまた変わるのでしょうがね。

👉 iPhone Android アプリ横断検索 
👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方 


Google「Closure Compiler」 (クロージャコンパイラ) の使い方

「Closure Compiler」 (クロージャコンパイラ) は、JavaScript の圧縮、最適化、およびバグの検出を行う Java コマンドラインユーティリティです。

👉 Getting Started with the Closure Compiler Application  

簡単な JavaScript で 「Closure Compiler」 を試すことができます。

 

1. Closure Compiler をダウンロードする。

Mavan リポジトリから最新の jar ファイルをダウンロードします。

google closure_compiler

👉 Maven Repository: com.google.javascript » closure-compiler 

 

2. JavaScript ファイルを作成する。

次の JavaScript を含む hello.js ファイルを作成します。


function hello(longName) {
  alert('Hello, ' + longName);
}
hello('New User');

 

3. JavaScript ファイルをコンパイルします。

次のコマンドを実行します。


java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

コンパイラはコメント、空白、および不要なセミコロンを削除していることに注意してください。コンパイラーは、パラメーター longName を短い名前に置き換えました。

その結果、はるかに小さい JavaScript ファイルが作成されます。


~
❯ java -jar closure-compiler-v20220301.jar --js hello.js --js_output_file hello-compiled.js

~
❯ cat hello-compiled.js
function hello(a){alert("Hello, "+a)}hello("New User");


<html>
  <head><title>Hello World</title></head>
  <body>
    <script src="hello-compiled.js"></script>
  </body>
</html>

HTMLファイルからブラウザにロードして表示できます。

 

まとめ

そもそもは、ブックマークレットを圧縮したかった。

なのでそのまとめとして。

以下の、稼働確認済みブックマークレットをコンパイルして圧縮する。


javascript:(
  function(){

    function hello(longName) {
      alert('Hello, ' + longName);
    }
    hello('New User');

  }
)();

対象コードをクリップボードにコピーしてから、以下のようにを実行する。


❯ pbpaste | java -jar closure-compiler-v20220301.jar | tee >(pbcopy)
The compiler is waiting for input via stdin.
(function(){alert("Hello, New User")})();

あとは、javascript: と頭に付けてブックマークに登録すればよし。


javascript:(function(){alert("Hello, New User")})();

Google ClosureCompiler (クロージャコンパイラ) の使い方

Google ClosureCompiler (クロージャコンパイラ) の使い方

👉 GitHub Gist に置いた Javascript をブックマークレットとして実行する 
👉 【macOS】コピーしているテキストをHTMLエスケープする 
👉 Closure Compiler  |  Google Developers 
👉 iPhone Android アプリ横断検索