山ｐの楽しいお勉強生活

勉強の成果を垂れ流していきます

We Are JavaScripters! @1st #wajs に参加したメモ

はじめに

11月24日（木）に「We Are JavaScripters!」という勉強会に参加してきました。

※メモとってまとめてましたが、blogに書くの忘れてたので1週間遅れながらうｐします。

概要

「JSの勉強会って、登壇する人がハイレベルな人ばっかりだな〜」 と思ったのがきっかけで作った勉強会、「We Are JavaScripters」！

自分が学んだこと/気づいたこと/面白かったこと/失敗したこと/ハマったこと/挑戦したこと/デバッグテクニック/オススメツール・開発環境/お気に入りのライブラリ/オレオレライブラリ/実はこうだった言語仕様/tips などなど、

お酒を片手に、気軽に発信できる場を目指しています^^/

※誰でも怖がらずに登壇できる空気を作りたいだけだけなので、もちろん玄人のみなさんも登壇大歓迎です！！

最初

  • JavaScriptの勉強会は初。
  • 会場はかなりカジュアルな感じ。
    • デスクとかない。
    • なんていうか、コワーキングスペース的な？
    • 奥に作業スペースっぽいのがあるけど、ひな壇みたいなとこに座ってプロジェクター見る感じ。
    • っと思ったら「21cafe」というエンジニア向け無料イベントスペースらしい。
    • ギークス株式会社は「21cafe」を運用しているとの事。
  • 開始前に酒を配り、乾杯してからSTART！
  • どっかに写真あがるのかな？
  • swift愛好会というのもゆるい勉強会らしい
  • Facebookでユーザーグループを作るらしい。

LT

  • LT.1：JSの基本的なことをちょっと掘り下げてみる話 ~this編~ - @Tammy

    • 凄いわかりやすいthisの説明。
    • スライドっというか、コード公開されたら見るのオススメ。

  • LT.2：電卓アプリで理解するReact/Redux入門（仮）- @Toshiharu Nishina

  • LT.3：人となりもよく知らないのにnode.jsと付き合ってました。ごめんなさい。 - @Kayoko

  • LT.4：TypeScript？なにそれ？おいしいの？ - @Jay Hori
    • TypeScriptはメンテしやすい
    • inferenceはないものとして使うといい感じらしい。
    • typescriptさっぱりなので、ざっくり説明されている良い資料？
      • ただし英語。

  • LT.5：必要な知識はJavaScriptだけ！さくっと作ろうAPIサーバー！ - @fukamiiiiinmin

  • LT.6：本当は…仲良くなりたいES2015 - @taka

    • ES2015を取り入れたい時に。
    • ES2015の簡易的な紹介。

  • LT.7：大規模WEBサイト開発でES2015を使ってみた話（仮）- @takanorip

  • LT.8：Introduction to Flow - @yamadayuki

    • Introduction to Flow
    • Flowの話し
    • Facebookが作ってるらしい
    • babelのプラグイン
    • 型を定義できる？のかな？
    • Typeチェックのツール
    • flow checkとコマンド打つとチェックしてくれる（そのまま）

  • LT.9：ポートフォリオにReact(仮)を導入してSPAもどきにしたよ - @atsuco

  • LT.10：JavaScirpt の勉強のために最初にやったこと - @chikoski

デール・カーネギー・トレーニングに参加して

memo

はじめに

2016/03/12 ～ 2016/06/11まで、12回に渡りデール・カーネギー・トレーニングに参加してきました。

約半額を会社に負担してもらったこともあり、自分が学んだこと、感じたことを社内勉強会で発表しました。

せっかくなのでそのスライドを一応blogにも書いておきます。

スライド

Grails3.0をWindowsではじめる

memo grails

結論

ダウンロードして、PATH通せばOK。

はじめに

  • WindowsにはSDKMANがない。
    • Grailsをはじめるぞー！何すればいいの？になった。
      • 追記（2017/09/15） : Windows10ならBash on Ubuntu on Windowsが入ったので、SDKMANがいいかも。
    • Cygwin？なにそれ美味しいの？
    • chocolateyはこの記事作成時には2.21とかいう太古のバージョン。（Friday, April 19, 2013らしい）
  • とりあえず環境作成まで。

前提（多分）

  • JDK7以上がインストールされている。
  • JAVA_HOMEに↑が指定されている。

手順

  1. Grailsダウンロード
  2. 1で取得したファイルを解凍。
  3. 環境変数設定
    • PATHに${2のファイル}/binを通す。
    • 例 : C:\tools\grails\grails-3.1.8\bin

試す

  • バージョン確認
C:\Users\yamap_55>grails --version
| Grails Version: 3.1.8
| Groovy Version: 2.4.6
| JVM Version: 1.8.0_91
  • アプリケーション作成
  • 作業フォルダに移動。
  • 動かしてみる
    • アプリケーション作成
grails create-app myapp
  • 起動
    • 初回起動時は「Resolving Dependencies. Please wait...」がかなり長いですので気長に待ちましょう。
cd myapp
grails run-app
  • ブラウザでアクセス
  • ↑のコマンド実行後にURLが表示されるのでブラウザでアクセス。
| Running application...
Grails application running at http://localhost:8080 in environment: development
  • 以下の画面が表示されたらOK。 f:id:yamap_55:20160626184222j:plain

参考

Groovyでのアスタリスクは便利！

groovy

Groovyはアスタリスクが便利に使えるのは知っていたけど、結局いつも忘れて使っていませんでした。 で、調べてみたら思った以上に機能があったのでまとめ。

assert 2 * 3 == 6
assert 3 ** 3 == 27

def i1 = 2
i1 *= 3
assert i1 == 6

def i2 = 3
i2 **= 3
assert i2 == 27

def m1 = [a:"a1",b:"b1"]
def m2 = [a:"a2",c:"c2"]
def m3 = [a:"a3",b:"b3"]
def list1 = [m1,m2,m3]

assert list1*.a  == ["a1","a2","a3"]
assert list1*.b  == ["b1",null,"b3"]

def str1 = "あいうえお"
def str2 = "abc"

def list2 = [str1, str2]
assert list2*.size() == [5,3]
assert list2.collect{it.size()} == [5,3] // 今までこう書いてた。

def function1 = {x,y,z ->
  x * y + z
}
def args1 = [1,2,3]
assert function1(*args1) == 5

def args2 = [4,5]
assert function1(*args2, 6) == 26

def list3 = [2,3]
assert [1,*list3,4] == [1,2,3,4]
assert [1,list3,4].flatten() == [1,2,3,4] // 今までこう書いてた。

def m4 = [c:3,d:4]
assert [a:1,b:2,*:m4] == [a:1,b:2,c:3,d:4]
assert [a:1,b:2,*:m4,d:99] == [a:1,b:2,c:3,d:99]

参考

ユーザスクリプトで普段の業務を楽にする

はじめに

社内勉強会で「ユーザスクリプトのすゝめ」というタイトルで発表を行いました。
割りと良い反応をもらえたので、ブログ用に一部変更して公開したいと思います。

アジェンダ

  1. ユーザスクリプトとは
  2. 使いドコロ
    • 実際に作ってみる
  3. Chromeの場合の使い方
  4. Firefoxの場合の使い方
  5. まとめ

ユーザスクリプトとは

Webページを開くときに、ブラウザ側で指定しておいたJavaScriptを実行させる機能です。特定のページ（Googleの検索結果など）をカスタマイズして表示したりできます。 FirefoxのGreasemonkeyが有名ですが、現在は主要ブラウザのほとんどで利用できます。

ユーザJavaScriptより

↑に引用した通りですが、Webページ上で任意のJavaScriptを動かすものです。
つまり、JavaScriptが動くということはなんでもできるという事で、そのWebページを好きに変更できる！
ブックマークレットを自動実行するできるという事でもあります。

使いドコロ

ユーザスクリプトで調べるとやたら高度な事をしていますが、私がオススメする使いドコロはもっと身近な所です。

例えば、以下のログイン画面を持つシステムを開発している場合。*1。

f:id:yamap_55:20160523011151j:plain

こんなユーザスクリプトを使用するとちょっと業務が捗ります。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.chi-bus.jp/
// @require      http://code.jquery.com/jquery-2.2.3.min.js
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    var l = ["","admin","user01","user02"];
    var se = $("<select>").attr({"name":"hoge","id":"hoge"}).on("change",function(){$("[name='USER']").val($(this).val());$("[name='PASSWORD']").val($(this).val());}).appendTo($("form").parent());
    $.each(l,function(i,v){
        se.append($("<option>").val(v).text(v));
    });
})();

上記のユーザスクリプト。見ていただければわかりますが、jQueryを使用してselectを作ってappendしているだけです。（ヘッダに色々書いてありますが、そこは気にしないでOK。）

f:id:yamap_55:20160523011153j:plain

で、↑こうなります。
コードの通り、selectを選択するとログインIDとパスワードが入力される。ただそれだけ。

ただ、このログイン画面を持つシステムを作っている場合、確認のために何百回、何千回とログインをするかと思います。
管理者ユーザ、一般ユーザのIDを毎回入力したり、adminをadimnとタイポしたり、実は結構時間使い、小さなストレスの元になっていたりすると思うのです。
そんなどうでもいいイライラを簡単に防げるのは良い思いませんか？ 同じ用途では検索画面の開発時などでも同様に使用できるかと思います。

また、登録画面では適当な値を入力したり、画面遷移を繰り返して行かなければならない画面にリンクを貼ったりなどはどうでしょうか？

私が開発時以外で使用している箇所としては、うちの会社は使い勝手の悪い勤怠管理システムを使用しているので、入力補助ボタンを勝手につけたりしています。（各タスクにかけた時間をテキストボックスに入力する必要があるのですが、30分は0030、1時間は0100と入力する必要があるので、30分入力ボタン、1時間入力ボタンなどをつけました。）

Chromeの場合の使い方

Tampermonkeyという拡張機能を使用します。*2Chromeウェブストアからインストールしてください。
後は、追加されたアイコンをクリックして「新規スクリプトを追加」を選択すれば作成できます。

Firefoxの場合の使い方

greasemonkeyという拡張機能を使用します。こちらからインストールしてください。
使い方は本家のwikiか、 greasemonkeyは前から有名な拡張機能なので、検索すれば日本語でも大量に出てきますのでそちらを参照してください。

最後に

ユーザスクリプトは簡単に使用でき、普段の業務にも活用することができます。上記したようなちょっとしたスクリプトでも役立ち度はかなり高いと思いますので、是非使ってみてください。

また、greasyfork等で、世界中のユーザが作成したユーザスクリプトも使用できます。業務的に使用できるものは少ないかと思いますが、ニコニコ動画用などは結構数があるので、プライベートでいんたーねっつを楽しむ上では使えるものがあるかもしれません。

*1:Googleで「ログイン画面」で検索すると何故か一番上に出ましたｗ

*2:実はChromeはデフォルトでユーザスクリプトに対応しているのですが、デフォルトは使いにくい事、Tampermonkeyがかなり良く出来ているのでこちらを使用しています。

Groovyでも愛が生まれた

Groovy

概要

Qiitaを見ていたら、面白いのがあったのでGroovyで行ってみました。

Stringだとビット演算子が使えないっぽいのでcharに変換しただけ。。。

コード

def a = "生"
def b = "死"
println ((a as char & b as char) as char)

元ネタ

元元ネタは2012年に流行ったのかな？

Qiita版

Googleドライブにファイルが追加されたらメール通知する

背景

子どもの写真をGoogleドライブで親達に共有しているのですが、遠方に住む義父から通知来ないといつ見ればいいかわからん！と連絡が。 さらに要望を聞くと、写真はフォルダ管理してるのですが、どのフォルダが更新されたかも教えて欲しいとのこと。

通知機能くらいGoogleドライブにあるだろと思って調べたが、そんな機能はなかったのでGoogle Apps Scriptで実装してみました。

実装

前回メールした時から更新されていた場合にメールを送る必要があるため、前回メール時の更新日時はスプレッドシートで保存することにします。

  1. Googleドライブの写真フォルダ配下から最終更新日時を取得。
    • フォルダ分けして管理していたため。
  2. 更新日時を管理しているスプレッドシートから前回メール送信時の各フォルダの更新日時を取得。
  3. スプレッドシートに保存していた最終更新日時より現在のフォルダの最終更新日時が新しかったらメールを送信。

って、ここまでblogに書いて気づいた。 毎日スクリプトを動かすんだから、前日に更新があったフォルダをメールすればよかったのでは！？ その場合、スプレッドシートもいらないし、もっと簡単な実装になりますねｗ

まぁ、GASの練習になったので、GASのメモとして記録します。。。

コード

var PHOTO_FOLDER_ID = "xxxxxxxxxx";
var UPDATE_SHEET_ID = "yyyyyyyyyy";
var UPDATE_SHEET_NAME = "更新日時";
var SEND_MAIL_ADDRESS = ["example1@example.com", "example2@example.com"]

function updateCheck() {
  var photoFolder = DriveApp.getFolderById(PHOTO_FOLDER_ID);
  var folders = photoFolder.getFolders();
  
  // 写真フォルダ配下の最終更新日時を取得。
  var lastUpdateMap = {};
  while (folders.hasNext()) {
    var folder = folders.next();
    lastUpdateMap[folder.getName()] = folder.getLastUpdated();
  }

  // スプレッドシートに記載されているフォルダ名と更新日時を取得。
  var spreadsheet = SpreadsheetApp.openById(UPDATE_SHEET_ID);
  var sheet = spreadsheet.getSheetByName(UPDATE_SHEET_NAME);
  var data = sheet.getDataRange().getValues();

  // 取得したデータをMapに変換。
  var sheetData = {};
  // 説明とヘッダを記載しているため2からstart。
  for (var i = 2; i < data.length; i++) {
    sheetData[data[i][0]] = {name : data[i][0], lastUpdate : data[i][1], rowNo : i + 1};
  }

  // 実際のフォルダとスプレッドシート情報を比較。
  var updateFolderList = [];
  for (key in lastUpdateMap) {
    if(key in sheetData) {
      // フォルダ名がシートに存在する場合。
      if(lastUpdateMap[key] > sheetData[key].lastUpdate) {
        // フォルダが更新されている場合。
        sheet.getRange(sheetData[key].rowNo, 2).setValue(lastUpdateMap[key]);
        updateFolderList.push(key);
      }
    } else {
      // フォルダ名がシートに存在しない場合。
      sheet.getRange(sheet.getLastRow() + 1, 1).setValue(key);
      sheet.getRange(sheet.getLastRow(), 2).setValue(lastUpdateMap[key]);
      updateFolderList.push(key);
    }
  }

  // 新規及び更新された情報をメール送信。
  if (updateFolderList.length != 0) {
    SEND_MAIL_ADDRESS.forEach(function(o,i) {
      MailApp.sendEmail(SEND_MAIL_ADDRESS[i],"写真更新連絡通知",
                        "写真が更新されました。" + "\n" +
                        "更新されたフォルダは以下の通り。" + "\n" +
                        updateFolderList.join("\n") + "\n\n" +
                        "URLはこちら↓" + "\n" +
                        photoFolder.getUrl() + "\n\n" +
                        "このメールに返信しても見れませんので返信しないでください。"
                        );
    });
  }
}