調整さんプラグイン開発までのプロセスを公開します!
先日、調整さんのデフォルト開始時間を変更するブックマークレットを作りました。
便利だと思うので、皆さん使ってみてください。 調整さんの中の人にも褒めていただいた?ので嬉しい限り。
スゴイ👏👏👏(我々が取り組むべき課題ですネ…恐れ入ります、ありがとうございます) https://t.co/nHEreZzDWx
— アヤパカ@調整さん中の人 (@ayapakka) August 12, 2019
「どうやって作ったの?」といった質問をいただいたので、作るまでの経緯を解説してみたいと思います!
作成までの経緯
なぜ作ろうと思ったか
モチベーションは大事ですよね。
友達と来月どこかで飲みに行こうー!と思って調整さんをつかったときに平日全て候補日にしたんですね。
20:00開始予定だったんですが全部19:00~になっちゃって、開始時間のデフォルトはどうやって変えるんだろうと思ったら、どうやらなさそうだと。
ないなら作っちゃうかと。きっと需要あるだろうと。
みたいな感じです。
chromeのアドオンにするか迷いましたが、お手軽にjsのブックマークレットでいいやーと。
調査フェーズ
調整さんのHTMLソースを見てJS部分を解析してみました。
「19:00」で検索したらそれっぽい箇所がヒットしました!
$("#datepicker").datepicker({ dateFormat: 'm/d(DD)', firstDay: 0, yearSuffix: '年', showMonthAfterYear: true, monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], dayNames: ['日', '月', '火', '水', '木', '金', '土'], dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'], minDate: new Date(), maxDate: '+12m', hideIfNoPrevNext: true, // 日付が選択された時、日付をテキストフィールドへセット onSelect: function (dateText, inst) { var nowText = $("#kouho").val(); if (nowText === "") { $("#kouho").val(dateText + " 19:00〜"); } else { $("#kouho").val(nowText + "\n" + dateText + " 19:00〜"); } } });
なるほどなるほどdatepickerね。onSelect
の部分を書き換えればなんとかなりそう。
ググる。
datepicker( 'option', 'onSelect', function (dateText, inst) { });
でonSelect
だけ上書きできそう。これはイケそうだ!
実装フェーズ
まず下記のようなコードを作り、
var time_text = " 19:30〜"; $("#datepicker").datepicker( 'option', 'onSelect', function (dateText, inst) { var nowText = $("#kouho").val(); if (nowText === "") { $("#kouho").val(dateText + time_text); } else { $("#kouho").val(nowText + "\n" + dateText + time_text); } });
chromeデベロッパーツールを開いてConsoleにコピペして検証してみました。
こんな感じ。
すると無事書き換わったぞ!!
あとはブラッシュアップするだけ。 即時関数にしてグローバルスコープを汚染しないように。そして調整さんへのリダイレクトを追加してみました。
(() => { const url = 'https://chouseisan.com'; if (location.origin != url) { location.href = url; return; } let time_text = prompt("デフォルト開始時間を設定します", "19:30~"); $("#datepicker").datepicker( 'option', 'onSelect', function (dateText, inst) { var nowText = $("#kouho").val(); if (nowText !== "") { nowText += "\n"; } $("#kouho").val(nowText + dateText + ' ' + time_text); }); })();
これをワンライナーにして先頭にjavascript:
を付与したらブックマークレットの完成です。
GoogleのClosure Compilerを使ってワンライナーにすると圧縮もされて便利。
デプロイ?フェーズ
ブックマークレットをブックマークするのって意外とめんどうですよね。
aタグとかにしてブックマークバーにドラッグ&ドロップする方法が一番お手軽そうだったので今回はそれにしてみました。
<a href="{ブックマークレット}" onclick="return false">ブックマーク名</a>
属性値(hrefの値)を"
で囲む必要があり、今回スクリプト内でダブルコーテーションを使っていたのでシングルコーテーションに置換しました。
※スクリプト内容によってはダブルコーテーションじゃないといけない可能性もあると思うので、その場合はエスケープするなり注意してくださいね。
<a href="javascript:(function(){if('https://chouseisan.com'!=location.origin)location.href='https://chouseisan.com';else{var b=prompt('\u30c7\u30d5\u30a9\u30eb\u30c8\u958b\u59cb\u6642\u9593\u3092\u8a2d\u5b9a\u3057\u307e\u3059','19:30\uff5e');$('#datepicker').datepicker('option','onSelect',function(c,d){var a=$('#kouho').val();''!==a&&(a+='\n');$('#kouho').val(a+c+' '+b)})}})();" onclick="return false">調整さんの開始時間変更</a>
完成ー。メイン記事に設置してるので登録してみてね!
参考にしたサイト
今後やりたいこと
- 外部jsファイルを読み込むブックマークレットの記述方法もあるのでそっちのほうがよさそう
- 今後バージョンアップとかしたときに再配布しなくてよくなる
- ブックマークレットメーカーみたいなものを作りたい
- お手軽にJavaScriptをブックマークレットにできるように
さいごに
不明点等あればお気軽にツイッター等でご質問くださいー。
海外のイケてるエンジニアが使ってるアバター作成サービスはこれだ!
おはこんばんちはaomaです。
GitHubとかのIssue見てるとたまにこんなアイコンの人見かけませんか?
結構いますよね?そうでもないですか?
外人のつよつよエンジニアはみんなこのアイコンにしてる!気がする。
ぼくもこのアバターにすればつよつよエンジニアになれる!気がする!きっとそうだ!
イケてる外人エンジニアに人気のアイコン?
国内にもいろんなアバター作成サービスがありますが、これは見たことないなー。。
ググっても画像検索してもなかなかヒットせず。。。
諦めるか、、いや気になる!!
そこで思い切ってこのアイコンを設定してる人に直接聞いてみることにしました!
画像検索でヒットしたツイッター民にアタック!
まずはジョンに聞いてみる
@johnross000 Hello!
— aoma23 (@aoma23) March 6, 2019
That is a question, where can I generate your icon?
...拙い英語だからか返事はありませんでした。。。
諦めないぞ!マイケルスミス!
@M1ch43l_Sm1th Hello!
— aoma23 (@aoma23) March 8, 2019
where can I generate your icon?
すると、、、
— Michael Smith (@M1ch43l_Sm1th) March 8, 2019
キターーー!
無言でURLだけ貼り付けて教えてくれました!ありがとうマイケル!!
ということで、下記からアバター作れます!「FAMILY GUY YOURSELF」カッコいい!
イケてるエンジニアになりたい人はぜひ!
さいごに
しっかりマイケルにお礼を伝えておきました。
Cool!!
— aoma23 (@aoma23) March 8, 2019
Thank you very much!
拙い英語だからか返事はない。
GASをGitHubで管理する便利なアドオンの紹介
sheet.newで新規スプレッドシートを開く
電卓代わりにちょっとした計算したいとき、スプレッドシートの計算式使うことあるよねーーー!
ってことで今まではGoogleドライブから新規スプレッドシートを開いてーみたいなことをしてたんですが、最近はブラウザのアドレスバーに「sheet.new」って入力して開くようにしてます。
これGoogleさんがドメインを持っていて提供してくれてるんですねー。
スプレッドシート以外にドキュメントやスライドなども対応されてます。
Introducing a ✨ .new ✨ time-saving trick for users. Type any of these .new domains to instantly create Docs, Sheets, Slides, Sites or Forms ↓ pic.twitter.com/erMTHOsdyH
— Google Docs (@googledocs) 2018年10月25日
知らなかった人は是非使ってみてくださいー。地味に便利。
【PHP】P++に怯えていたらP++は無くなった話
2日ほど前にこの記事を見ました。
感想は、
- いま流行りの静的型付け?動的がPHPのいいところでは?
- PHP8から?すぐやん。共存?PHP内で宗教戦争になりそう。。
- P++って名前がちょっとな。。
- とはいえやっていかなければいかんのか。大好きなPHPだし。
ということで怯えていたわけですが、本日こんな記事が。
P++: 銀河に平和をもたらすための奇策と決着 - Qiita
結果としてはP++はアイデア段階の話でアンケート取った結果やらなくなったらしい。
変な争いが起こることなさそうなのでおじさん一安心。
思ったこと
- 記事書いた人、こういった最新情報ってどうやって仕入れているの??(いつも思う)
- こういう情報自ら取れるようになりたい
- でないとフェイクニュースに踊らされる感がある(今回はフェイクニュースじゃないけど)
- このままだと、君は踊り狂って死ぬ!(ヒソカ)
ということで、今日も夏休み楽しんでます。
もうSlackなしでは生きていけない!
仕事していく上でコミュニケーションツールはもうSlackじゃないとモヤモヤしてしまう。
こんなにSlackを愛してしまうとはね。。
Slackが他のチャットアプリと比べて優れている点!おそらく特にないです。きっと世の中の流行りと使い慣れてしまったことがSlack信者にさせているのだと思う。
そう、まるでGmailのように。昔はメーラーも山ほどあったのに今はGmailの圧勝である。そしてGmail以外を使うなんて考えられない。
Slackも同じレベルにまで到達しようとしてきている。
ただスレッド機能。テメーはダメだ。 以前書いたこの記事の気持ちは変わらない。是非読んでいただきたい。そしてブクマしてほしい。
Slackにスレッド機能が追加されてますますSlackが嫌いになった件 - aoma blog
それではステキなNo Slack No Lifeを!
夏休み、お前に一言物申す!
夏休みっておかしくない?
小学生の頃は1ヶ月以上休みなのに対して、朝から晩まで毎日遅くまで働いてる社会人の休みは長くても5日間くらいっておかしいでしょ!!
比率からいったら3ヶ月くらい休みでよくない?
現場からは以上です。