Sheeprograming

<input type="text" id="copyExec" />

// input の中身を全選択する
// jQuery が使えるなら $('#copyFrom').select(); でも OK
var input = document.getElementById('copyFrom');
input.focus();
input.setSelectionRange(0, input.value.length);

// 選択した範囲をクリップボードにコピー
document.execCommand('copy');

なお、input の中身を選択しないといけないので input の css に display:none; 等と設定していると上手く動かないので注意。ユーザに表示させたくない事情がある場合は position:absokute; top:-5000px; 等としてはるか彼方に飛ばしてしまうが吉。

execCommand

execCommand は割と色々やれるようで、選択した範囲の文字を装飾したりできるようだ (MDN の解説)。ただし、上述の input が対象だとやれることは限られる。しかし contenteditable な HTML だとちょっと変わってくる。

<div contenteditable>
ひよこ<br />
ひつじ<br />
こねこ
</div>
<hr/>
<div>
編集対象外の HTML
</div>

上述のような HTML を書いたうえで上の contenteditable な HTML の一部分を選択し document.execCommand('foreColor', null, 'red'); 等としてやるとその範囲のフォントを赤にできる。しかし、下部の contenteditable ではない HTML については不可能となっている。どんなことができるのかは MDN に解説が載ってたりする。背景色を変えたり、文字のそろえ方を変えたりできる。簡単なエディタを実装・提供したい場合には便利そう。

Discord でやったときの話

Jenkins に Google のアカウントでログインできるプラグインが便利だったので Slack でやれないかなーって思って調べてみる。

なお、そういうプラグインはさっとググってみたところなかった。しょんぼり。

おそらく以下が出来ればできそう。

1. Slack の OAuth が使える
2. Jenkins のプラグインでログイン周りの設定をいじれる
3. 1, 2 を合体

とりあえず公式

Using OAuth 2.0 | Slack

アプリを登録する

Slack API: Applications | Slack からアプリを登録する。アプリを作る際はワークスペース一つとアプリの名前を登録する必要がある。ワークスペースを持っていなければ適当に調達しよう。ここを読んでいる時点でない、ということはないと思うが……

Client ID, Client Secret と OAuth token を取得する

3つの値をメモする。

アプリを作ったら Slack API: Applications | Slack 等から先に作ったアプリを開く。

まず、Client ID と Client Secret を取得する。アプリを開いてちょっと下にある App Credentials の Client ID と Client Secret の内容をメモする。前sぢゃは012345678901.012345678901 とかそんな感じの . に区切られた数字の羅列であるはず。後者はローマ字の小文字と数字の混じった文字列のはず。Show ボタンをクリックすれば読めるようになる。

さらに App Credentials の上にある Add features and functionality から Permissions を開く。

開くと Install App to Workspace なる緑色のボタンがあるので叩く。なんか尋ねられるので Authorize をクリックし承認する。意味が不安なら頑張って読んでください。

承認すると OAuth & Permissions の画面に戻るので OAuth Access Token をメモる。OAuth Access Token は xoxp で始まる文字列のはず。t例えば xoxp-123456789012-123456789012-123456789012-4268abcdef12abcde12a12a1abc123a0 等である。これは他の人にはあまり見せないこと。この例もスタイルを似せつつ適当こいてる。

Redirect URLs を登録する

先の Tokens for Your Workspace の下にある Redirect URLs の Add New Redirect URL をクリックし適当な URL を入れる。実際には OAuth をつかって認証した直後にジャンプしてほしいページの URL を入れる。追加したら直下の Save URLs をクリックする。

OAuth 用ログイン URL を作る

以下の形式になる
https://slack.com/oauth/authorize?client_id=${Client ID}&scope=${付与される権限}&redirect_uri=${リダイレクト先の URL}

例をそのまま使うと次のような感じになる。
https://slack.com/oauth/authorize?client_id=012345678901.012345678901&scope=channels%3Ahistory%20users%3Aread&redirect_uri=http%3A%2F%2Fshunshun94.web.fc2.com%2Fsweet%2F&team=my_example_workspace_1549&state=rndString_k2SgIOUn
アクセスしてみると Slack のログイン画面が出てくるので、ログインするとリダイレクト先のページにジャンプできるはずだ。

code をメモする

リダイレクト先のページにジャンプした際、 URL に code=xxx.. という記載があるはずなのでこれをメモする。 &state=... もあると思うがこちらは検証用に使うものなので使うなら使えばいいし、捨てるなら捨てるでよい。

アクセストークンを取得する

以下では curl を使う。curl でできるなら大体のプログラミング言語でやれるだろう。

curl -X POST -H "Content-Type:application/x-www-form-urlencoded" \
-d "redirect_uri=${リダイレクト先の URL}&\
client_id=${Client ID}&\
client_secret=${Client Secret}&\
code=${code}" \
https://slack.com/api/oauth.access

上手くいくと以下のような返答が返ってくる。この access_token をメモること。

{
  "ok": true,
  "access_token": "xoxp-012345678901-012345678901-012345678901-fsrieoikdsdymo1e8wv8fydoupkyikox",
  "scope": "identify,bot,channels:history,channels:read,users:read,chat:write:user",
  "user_id": "JO88AWYL3",
  "team_name": "私のSlack",
  "team_id": "ZI1F3NKB6"
}

実際に使ってみる

割と色々やれる。

ユーザの一覧を取得する

curl -X GET -H "Authorization: Bearer ${先に取得した access_token}" \
https://slack.com/api/users.list

発言する

curl -X POST -H "Content-type: application/json" \
-H "Authorization: Bearer ${先に取得した access_token}" \
-d "{\"channel\":\"random\", \"text\": \"にゃーん\"}" \
https://slack.com/api/chat.postMessage

社内の Jenkins にユーザを追加するのが面倒になってきたので、Google Login Plugin (Jenkins Wiki / GitHub) というプラグインを Jenkins に入れてみようという話になりためしてみた。

導入手順はこの記事を書いている時点では GitHub 記載の通りでよい。

導入後、Jenkins の設定から「グローバルセキュリティの設定」をクリック、得られたメニューの「ユーザー情報」から選択すれば使える。設定の際、Google Apps Domain は特に何も設定しなくても動くようだ。

設定した状態でログインを試みると Jenkins のユーザ名・パスワードを入力する画面ではなく Google のログイン画面に飛ばされる。これで Google にログインすればそのまま Jenkins にログインできる。特に Jenkins 側にユーザの登録をする必要はない (権限の設定は別途必要)。

また、 Google の OAuth 設定で Google アカウントを特定組織に含まれるもののみ、とかにしておけば社用のアドレスでのみログインを認めることもできる。弊社はそういうことをしていたので便利便利。

Slack でログインできたらありがたかったりするけどにゃー

こういう結果が欲しい

書いた HTML / CSS

<div class="_100x100"></div>
<div class="_200x100"></div>
<div class="_100x200"></div>
<div class="_100x100r"></div>
<div class="_200x100r"></div>
<div class="_100x200r"></div>

div {
  border:1px black solid;
}

._100x100 {
  width:100px;
  height:100px;
  background-image: linear-gradient(0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._200x100 {
  width:100px;
  height:200px;
  background-image: linear-gradient(1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x200 {
  width:200px;
  height:100px;
  background-image: linear-gradient(0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x100r {
  width:100px;
  height:100px;
  background-image: linear-gradient(-0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._200x100r {
  width:100px;
  height:200px;
  background-image: linear-gradient(-1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

._100x200r {
  width:200px;
  height:100px;
  background-image: linear-gradient(-0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent);
}

書いた内容について

CSS の linear-gradient (MDN の解説)で表現している。linear-gradient は以下のように分解して読む。

実のところ線を引いているのではなく、背景をそれっぽくしているだけである。

角度は他の方法でも指定可能だが、今回は最も簡単に計算できるラジアンで計算した。計算方法には Math.atan 関数を使う。例えば、縦200px 横100px の長方形の左上から右下にかけて線を引きたい場合は 45° よりさらに深くグラデーションを傾け、グラデーションの向きが射線と垂直となる必要がある。この時の角度は、Math.atan(200/100) で得られる値となる。サイン、コサイン、タンジェントのタンジェント、これの逆関数 (アークタンジェント) を使う。

どういうことがしたいの

以下のように用意した画像を、新規で画像をデプロイすることなく一部分のみ切り出したい。

以下の結果が得らえれることが期待される。

サムネイル？

単純に画像全体を小さく表示して並べたときに把握するのを簡単にするものを画像のサムネイルと呼ぶが、ここではそれではなく 画像のごく一部を切り取って表示したもの を指す。

Web 古代社会には絵を個人が公開するために便利な Twitter や Pixiv 等といったサービスはなかった。ブログなどが登場する前は個人がウェブサイトを作成し、そこで公開されていたのである。そういった場で画像の一部のみを切り出し、それをリストとして表示して「見たい絵をクリックしてね」とする公開方法が流行った。

サムネイル画像は大体が本体の画像と別に用意されていた。だが、このために画像を切り出してその画像をデプロイするのは面倒だ。

何に使うの

TRPG のセッションログを公開する際に発言者の名前欄の下にキャラクター画像の顔だけ表示したい。全身絵は提供されており、切り抜き加工については許可されている。しかし、顔画像だけ切り出すのが面倒だと思った。

やり方

以下のような HTML を用意し、画像を picture クラスを持つ要素に表示させる。そのうえで、表示範囲を pictureFrame の範囲のみに絞る。

<div class="pictureFrame">
	<div class="picture"></div>
</div>

.pictureFrame {
	/* overflow: hidden にすることで画像のうち
	   この範囲をはみ出している部分は非表示とする */
	overflow: hidden;

	/* .picture クラスの表示位置の機転を .picutureFrame とすることで
	   位置操作を容易にする */
	position: relative;

	/* お好みで。画像を表示する範囲。
	   この場合は 30px × 30px の正方形となる。
	   ボーダーはいらなければ設定しなくてよい */
	height: 30px;
	width: 30px;
	border: 3px double black;
}

.picture {
	/* picture の表示位置の基準点を .pictureFrame の左上とする */
	position: absolute;

	/* 画像の表示を .picture に収まる最大サイズかつ縦横比を維持した状態とする */
	background-size: contain;"

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像を上に 55px 左に 85px ズラし、
	   画像の顔部分が表示されるように調整した */
	top: -55px;
	left: -85px;

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像の縮尺を本来の 720 × 1280 から以下のサイズに縮尺する */
	width: 180px;
	height: 320px;

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像の URL */
	background-image: url('http://shunshun94.web.fc2.com/replies/pics/enjoySw2_majin-adely_1.png');
}

別に画像は div を使わなくても img 要素でもよい気がする。ただ、用途が TRPG のログのためだった。なので

• 要編集箇所が多く、発言者ごとに img の src 属性を編集するのが面倒だった
• 画像を差し込む部分の親要素が発言者ごとに異なる class が割り当てられたいた

以上の関係でこっちの方が容易だった。

また、pictureFrame クラスに border-radius を設定したりすれば丸く切り取れたりする。