アプリ開発においてアイコンは必須。
ですが非デザイナーにとってアイコン作成ってとても難しいですよね。
そんなときはアイコン作成サービスを使いましょう。
今回紹介するのはIcons8です！
先日公開したGmailの再送信アドオンのアイコンもこれで作りました。
使い方はとっても簡単。ほしいアイコンを探すだけ。
例として「Gmail」で検索すると多くのメール系アイコンがヒットします。その中から選ぶだけ！
カスタマイズもできて、色味や画像を重ねることもできます。
選んだアイコンによってオーバーレイできる画像の種類も変わるようです。
英語が苦手という人に朗報。日本語版サイトもあります。
個人でも商用利用でも無料で使えます！ただしリンクをお忘れなく！詳しくはランセンスページを確認ください。
お気に入りのアイコンをサクッと作成しましょう！
送信したメールを編集して再送信したいときってありますよね！
昨日送った日報メールを日付だけ書き換えて送りたいとか。
でもGmailには再送機能がない。。。
かなり昔から需要はあります。
海外でも困ってるぽい。
それなのになぜ実装してくれないのかGoogleさん！なぜなんだぜ...
私も再送機能を待ち望んでいる一人でした。いつか実装されるだろうと待ち続けて早10年。ようやく気づきました。これは実装しないなと。。
ということで、今回再送アドオンを作りました！
その名も「Resend for Gmail」です！
Gmailは「Gmail Add-ons」という専用のアドオンを開発可能です。chromeなどのブラウザ用アドオンではないので注意。
再送信したいメールを開いて、画面右の「RESEND (CREATE DRAFT)」を押すだけ！
下書きメールが作成されるのであとはよしなに編集して送信してください。
デベロッパー用アドオンとしてインストールください。
アドオンを一般公開するにはGCPにアップする必要があったりと大変そうだったのでご容赦ください。m(> <)m
下記サイトを参考にするとわかりやすいです。
Google Apps ScriptでGmailを自動化する(13) Gmailアドオンを作る (1) アドオンの作成からインストールまで | マイナビニュース
するとこんな感じで画面右のアドオンにアイコンが追加されます！
初めて使うときはアクセス承認を聞かれるので承認してください。
一応HTMLメールとテキストメールの判定出し分けは実装したのですが、バグや改善点等ありましたらお気軽にプルリクお願いします！！
また、海外の困ってる方向けに英語翻訳、発信等してくれる方もいましたら是非！
また、アドオン一般公開するの簡単だから教えてあげるよっていう方もいましたら是非！
先日、調整さんのデフォルト開始時間を変更するブックマークレットを作りました。
便利だと思うので、皆さん使ってみてください。 調整さんの中の人にも褒めていただいた？ので嬉しい限り。
スゴイ👏👏👏(我々が取り組むべき課題ですネ…恐れ入ります、ありがとうございます) 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>
完成ー。メイン記事に設置してるので登録してみてね！
不明点等あればお気軽にツイッター等でご質問くださいー。
おはこんばんちは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!
拙い英語だからか返事はない。
電卓代わりにちょっとした計算したいとき、スプレッドシートの計算式使うことあるよねーーー！
ってことで今までは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日
知らなかった人は是非使ってみてくださいー。地味に便利。
