GitHub Gist のコードをスクリプトから更新する方法

ブラウザ上で長文テキストを編集すること、

キモいですよね、クソです!

github gist edit browser

GitHub 公式のコマンドラインツールは便利です。
👉 cli/cli: GitHub’s official command line tool hatena-bookmark


$ gh gist -h
Work with GitHub gists.

USAGE
  gh gist <command> [flags]

CORE COMMANDS
  clone:       Clone a gist locally
  create:      Create a new gist
  delete:      Delete a gist
  edit:        Edit one of your gists
  list:        List your gists
  view:        View a gist

INHERITED FLAGS
  --help   Show help for command

ARGUMENTS
  A gist can be supplied as argument in either of the following formats:
  - by ID, e.g. 5b0e0062eb8e9654adad7bb1d81cc75f
  - by URL, e.g. "https://gist.github.com/OWNER/5b0e0062eb8e9654adad7bb1d81cc75f"

LEARN MORE
  Use 'gh <command> <subcommand> --help' for more information about a command.
  Read the manual at https://cli.github.com/manual

 

エディタを変える

このデフォルトのエディタ nano って誰が推してるんすかね。


$ gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

github gh gist edit nano

変えます、emacs に。


$ EDITOR=emacs gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

いいですね。

EDITOR=emacs gh gist edit

ということは、

「gh gist edit」 は、

シェル変数 EDITOR に反応するアプリケーションですね !

 

ファイルを上書き更新する

とはいえ、

いまどきはもろGUIなIDEで豊富な機能を使ってコードは書いていきます。

なので、

パソコン上のIDEで書いたコードを Gist に更新していきたいですよね !

「更新」とは同じIDの Gist の上書きのことを言っています。


$ EDITOR="cp ~/ide/path/to/script/new.js" \
 gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

想像できてましたか?

GitHub 公式アプリ内のシェル変数 EDITOR の処理を。


[ -z "$EDITOR" ] && EDITOR=nano
$EDITOR TEMP_FILE

通常、エディタの起動コマンドを入力する文字列に


cp src-file

をセットすることで


vi tmp-file


cp src-file tmp-file

となり実行されます。

👉 linux - How do I edit /etc/sudoers from a script? - Stack Overflow hatena-bookmark

実際、言語は Go で書かれていますが、処理の内容はそういうことです。

 

標準入力から更新する

こんなの公開されてる方がいます。


$ echo "edit a gist from output piped from another command" | \
 EDITOR="cp "<(cat -) gh gist edit {<gist ID> | <gist URL>} [flags]

👉 GitHub CLI の gist edit へパイプを接続し、gist を編集する hatena-bookmark

「プロセス置換 (Process Substitution)」を使って処理しています。

「コマンド出力をファイル化して、そのパスを返す。」という使えるやつ。


$ cat <(date)
Thu Jul 21 12:40:53 EEST 2011

$ echo <(date)
/proc/self/fd/11

👉 プロセス置換 (Process Substitution)について - 一から勉強させてください hatena-bookmark
👉 shell - Process substitution and pipe - Unix & Linux Stack Exchange hatena-bookmark

 

まとめ

この先人たちの作ったコマンドラインツールの素晴らしさよ。

「ノーコード」とか言うてるやつな。

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


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」 (クロージャコンパイラ) の使い方 


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


highlight.js に「AndroidStudio」スタイルが登場してた件

WEBサイトでコードをシンタックス・ハイライトするなら「highlight.js」がおすすめです。

highlight.js Android Studio style

👉 highlight.js 

「スタイル」と呼ばれるきれいなテーマが今では 246個 もあるようです。

Androidアプリ向けIDE「AndroidStudio」というスタイルも登場していました。

ダークなほうの「Darcula」ですね、これ。

highlight.js Android Studio style

その他、いくつかメジャーどころを貼っておきます。

github

github-dark

github-dark-dimmed

stackoverflow-light

stackoverflow-dark

使い方

HTMLヘッダーの中に表示したいスタイル「androidstudio」のCSSファイルと、プログラミング言語を認識するJavaScriptファイルについて記述しておきます。


<link rel="stylesheet" href="/path/to/styles/androidstudio.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<pre><code class="language-kotlin"> ~ </code></pre> 内にコードを差し込みます。

言語はここで指定しなくても自動検出してくれるようですが、短いコードなどもあるので、念のため記述しておいたほうが良いでしょう。

実体参照にエスケープしたコードを以下のように差し込み貼り付けます。


<pre><code class="language-kotlin">
import kotlinx.serialization.Serializable
import kotlin.random.Random

interface Building

@Serializable
class House(
    private val rooms: Int? = 3,
    val name: String = &quot;Palace&quot;
) : Building {
    var residents: Int = 4
        get() {
            println(&quot;Current residents: $field&quot;)
            return field
        }

    fun burn(evacuation: (people: Int) -&gt; Boolean) {
        rooms ?: return
        if (evacuation((0..residents).random()))
            residents = 0
    }
}

fun main() {
    val house = House(name = &quot;Skyscraper 1&quot;)
    house.burn {
        Random.nextBoolean()
    }
}

</code></pre>

👉 【macOS】コピーしているテキストをHTMLエスケープする 

ブラウザでアクセスすると以下のように表示されています。


import kotlinx.serialization.Serializable
import kotlin.random.Random

interface Building

@Serializable
class House(
    private val rooms: Int? = 3,
    val name: String = "Palace"
) : Building {
    var residents: Int = 4
        get() {
            println("Current residents: $field")
            return field
        }

    fun burn(evacuation: (people: Int) -> Boolean) {
        rooms ?: return
        if (evacuation((0..residents).random()))
            residents = 0
    }
}

fun main() {
    val house = House(name = "Skyscraper 1")
    house.burn {
        Random.nextBoolean()
    }
}

👉 How to use highlight.js 

このサイトでも使っていましたが6年ぶりに更新してみましたので 🙆



【三井住友カード(NL)】決済方法 「クレジットカード現物」vs「iD」vs「VISAタッチ」どれが得なのか。【ApplePay / GooglePay】

2022年3月1日から GooglePay でも VISAタッチ 決済が可能になりました。

Android端末でも iPhone ApplePay と同じようにクレジットカード現物なしに決済ができるようになってます。

これまでは、GooglePay は「iD」経由のタッチ決済しかありませんでした。


しかし、これからは、クレジットカード直にVISAでタッチ決済できます。

ポイント5%です。

Visaの Google Pay™ 対応記念!最大1,000円分プレゼントキャンペーン|クレジットカードの三井住友VISAカード
👉 Visaの Google Pay™ 対応記念!最大1,000円分プレゼントキャンペーン|クレジットカードの三井住友VISAカード 
👉 Google Pay™ (グーグルペイ)の使い方徹底解説!設定方法や利用可能店舗も紹介 | 【ヒトトキ】三井住友カード 

決済方法の選択肢が多くなってますが、ポイント5%は、今や「タッチ決済」のみです。

いつもの利用でポイント最大5%還元!|クレジットカードの三井住友VISAカード
👉 いつもの利用でポイント最大5%還元!|クレジットカードの三井住友VISAカード 

ポイント 5% をゲットするには、以下2つののどちらかとなります。

「カード現物」を「タッチ」する。

「iPhone/Android 端末(ApplePay/GooglePay)」を「VISAタッチ決済」として「タッチ」する。

ポイント「5%」のつもりが「2.5%」のありがちな失敗

気をつけなければいけないパターンがあります。

以下では、ポイント2.5%となってしまいます。

「カード現物」を店員に渡したらタッチせずに「スライド(磁気ストライプ決済)」や「差し込み(ICチップ決済)」される。

ICチップ取引:
クレジットカードを決済機に挿入後、すこし時間経過後に4桁の暗証番号を押して承認されるのを待つ

磁気ストライプ取引:
店員にカードを渡すか、手元の決済機にカードをスライドさせることでカードを認識させ、すこし時間経過後にレシートやタブレット端末にサインを入力する

👉 あまりにもVisaのタッチ決済の認知度が低くて、店員とまぁまぁトラブルになる件!利用前に怒られることもあれば、使って怒られることも。 - クレジットカードの読みもの 

「iPhone/Android (ApplePay/GooglePay)」を「iD」経由で「タッチ」してしまう。

コンビニレジでは、「クレジットカード」を選んでからカードやスマホ端末を「タッチ」します。
セブンレジ あまりにもVisaのタッチ決済の認知度が低く

イオンなどのスーパーのレジでも同様です。

イオン レジ あまりにもVisaのタッチ決済の認知度が低く

注意するのは、レジにたってる「店員の操作」と「iD選択ボタン(を押さないこと)」です。

ゲットしたポイントは、私は、月ごとの支払金額から、1ポイント1円 でキャッシュバックとして相殺してもらってますがギフト券とか他にも変換方法はあるようです。

👉 キャンペーン・ポイント|クレジットカードの三井住友VISAカード