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 アプリ横断検索 

【Kotlin】そのアプリが、フォアグラウンドになったとき、フォアグラウンドであるかどうか、を検知・検出する

現在、絶賛?キャンペーン中ですかね。

アプリ起動時広告は、アプリの読み込み画面を収益化することを望むパブリッシャー様を対象とした広告フォーマットです。この広告は、ユーザーがアプリをフォアグラウンドに移動すると表示され、いつでも閉じることができます。

アプリ起動時広告は、アプリの読み込み画面を収益化することを望むパブリッシャー様を対象とした広告フォーマットです。この広告は、ユーザーがアプリをフォアグラウンドに移動すると表示され、いつでも閉じることができます。

👉 アプリ起動時広告  |  Android  |  Google Developers 

眺めてましたよ、おぼつかないサンプルコードを。

複数のコールバックたちに苦しみながらサンプルコードを容赦なく大幅改変していく様子が、API設計の難しさを表してると思います。

今回は、

「アプリがフォアグラウンド(可視状態)になったら何らかの処理をする。」

というやつ関連を抽出しておきます。


class MyApplication : Application(), Application.ActivityLifecycleCallbacks, LifecycleObserver {

  override fun onCreate() {
    super.onCreate()

    ProcessLifecycleOwner.get().lifecycle.addObserver(this)

  }


  @OnLifecycleEvent(Lifecycle.Event.ON_START)
  fun onMoveToForeground() {
    // Show the ad (if available) when the app moves to foreground.

    // do something

  }

👉 googleads-mobile-android-examples/MyApplication.kt at master · googleads/googleads-mobile-android-examples 

Deprecated なのを置き換えて、継承から外します。


ProcessLifecycleOwner.get().lifecycle.addObserver(
  object : DefaultLifecycleObserver {
    override fun onStart(owner: LifecycleOwner) {
      // do something
    }
  }
)


便利ですねこれ。

あと、

「アプリがフォアグラウンド(可視状態)かどうか。」

というやつ。


val foreground: Boolean
  get() = ProcessLifecycleOwner.get().lifecycle.currentState.isAtLeast(Lifecycle.State.RESUMED)

ここは、「RESUMED」でいいのか知らんが、試せばいいか。

👉 DefaultLifecycleObserver や LifecycleEventObserver の使い方