tech」カテゴリーアーカイブ

せっかくWFHだしワーケーションしてみた

この記事は、スターフェスティバル Advent Calendar 2020の5日目です。
スターフェスティバルではエンジニアを募集しています。

こんにちは、soriです。そういえば前回のAdvent Calendarの記事は自己紹介をしてませんでした…。おもに法人・団体向けのお弁当の宅配サービス「ごちクル」でご存じの方もいらっしゃるかもしれない、スターフェスティバル株式会社でエンジニアをしています。
現在はオフィスワーカー向けのランチ予約・お届けをするサービスの開発を主に担当していて、Node.js/TypeScript/Next.jsまわりのコーディングを日々やっています。(これ前回のときに説明するべき内容かもしれない…)

弊社ではCOVID-19情勢を受けて、2020年3月から段階的にWFH(Work From Home、いわゆる在宅勤務、リモートワーク、テレワーク)を導入しています。当初は緊急事態宣言の発令など、急遽対応せざるを得なくなったこともあり制度が整っていない点もありましたが、状況の長期化や、WFHによる利点の多さなどもあり徐々に全社的に制度も整ってきています。(なお、感染対策をした上で希望によりオフィスでの勤務しているメンバーも居ます。人によりWFHは合う合わないはあると思いますので、いずれにしても押し付けのない働きやすい環境です)

WFHの具体的な事例についてはまた機会があったらお話するとして、今日はWFHの状況を利用してワーケーションをした話をします。
WFHを初めて、感染者の状況も落ち着きつつあった11月の頭、私は長崎へ5日間のワーケーションを楽しんできました。といっても、日曜・祝日・移動日の休日を利用したので、実質仕事をしたのは2日間です。

宿泊について

朝食のサバサンド
ホテル近くの朝食で食べたサバサンド。

仕事をする場所について、一般的なwebエンジニアがワーケーションするには最低限インターネット及び電源環境が安定している場所が必要かと思います。
基本的には長崎のコワーキングスペースや、電源のあるカフェを当てにしていましたが、それなしにも最低限宿泊地でも仕事ができる場所を探し、結果長崎市内大浦にあるレジデンスタイプのホテル(マンションをリノベーションしたようです)を4泊5日で押さえることにしました。

ホテルは小綺麗なワンルームのような間取りで、小さいキッチン(ガスやIHはなかった)、バストイレ別、洗濯機が備え付けで、まるまる5日間の暮らしには問題ないものでした。簡易なデスクと椅子もあり、短時間のエンジニアリング作業には問題ない感じでした。

ちょっとしたよかった点として、周辺に感じの良いカフェがあり、4回の朝のうち3回はそこで朝食をとりました。長崎ではサバサンドをご当地グルメとして推しているらしく、朝にさっぱりして美味しかったです。

ワーケーション1日目

ワーケーション1日目は旅行自体の2日目です。
移動の初日や最終日は、移動疲れなどもあると思うので休みにしておくのがいいと思います。

旅行先での仕事をしたのは月曜日で、その日は長崎県内で海鮮を食べたいという野望があったので、まず午前中にホテルにて仕事、お昼に移動と朝食、その後カフェで仕事という計画にしました。

午前中については先程書いたとおりで、ホテルの回線状況も問題なく普通に仕事できました。強いて言えばホテルの椅子がIKEA製の固いもので、長時間の作業には向かなそうでしたが、今回は長い時間作業しなかったので問題なかったです。

お昼前ぐらいにレンタカーを借りて移動を開始し、長崎の北部の松浦の道の駅でブリの丼をいただき、海鮮欲を満たせました。その道の駅のご飯のようすは道の駅メモの記事に書いてあるので良かったら見てください。

その後佐世保に移動し、五番街という港湾沿いの商業施設にあるスターバックスの電源席で午後の作業をしました。弊社のエンジニアは勤務時間に自由が効くため、このような移動のときも融通が効いて便利です。

インターネット回線についてはスターバックスのフリーWifiも使えなくもないのですが、セキュリティに安全を期すため、同行者と折半してこの旅行のためにモバイルルーターを借りています。

お昼過ぎから夜19時頃にかけてそこで作業したのですが、景色もよく夜に向かって段々と景色が変わっていく港の景色を見ながらの仕事はとても快適でした。

夕方ぐらいにZoomでのミーティングに参加したのですが、旅行先で仕事をしていると現在の状況をミーティング先に共有したくなるという気付きがありました。なんとなくテンションが上がるもんです。

佐世保での仕事風景。

仕事の後は佐世保のローカルグルメ、佐世保バーガー…ではなくレモンステーキを食べに佐世保のLemond Raymondという有名店に。とにかく普段では食べれない美味しい食べ物を仕事の日でも堪能できるのがワーケーションの醍醐味ですね。

レモンライスというセットを注文。混ぜるとチーズのとろけ具合がやばい。

ワーケーション2日目

また日を改めてワーケーション2日目。この日の前日は祝日だったので、ペンギン水族館を見たり島原半島を巡ったりして楽しみました。ワーケーション2日目は旅行の4日目です。

この日はあまり移動はせず、前もってスペースマーケットで予約していた、コワーキングスペースのHafH Nagasaki Gardenへ。

この施設はHafHという働きながら宿泊ができるサブスクリプションサービスの施設で、この施設についてはドロップイン利用(つまり、コワーキングスペースの日中利用)のみもできるとのことでそれを利用させていただきました。

こちらの施設がとにかく良さみが高く、旅行先の仕事場として最高でした!

ロケーションは長崎の路面電車の諏訪神社前からバスで10分程度、高台にありあちこち移動するには至便とは言えないのですが、高台にあるだけあってとにかく景色がよく、古民家のリノベーションされているスペースで快適、ワーキングスペースには掘りごたつ式にコンセントのある作業スペースと、あと人をダメにするソファ完備で完璧、もちろんインターネット回線スピードについても問題ありませんでした。

コワーキングスペースの部屋内の写真は撮り忘れてしまったので、さきほどのスペースのサイトを見てもらえればと思います。

とにかく外の景色が開けていて良いので、普段パソコンに向かってばかりで目が疲れてしまったときには遠くの景色を見て気分転換なんてこともできます。

ランチなどご飯を食べる場所は近くにないんですが、お昼はまたバスに乗って少し移動して、諏訪神社近くの「カレーの店カルカッタ」というお店でトルコライスをいただきました。

トルコライス。カレーがけができる。カレーがピンク色で面白い

施設の直ぐ側にはファミリーマートもあるので、そこで大体のものは済ませられるでしょう。

先程もちらっと触れましたがこちらの施設は宿泊もでき、聞いたところによると移住して長期滞在している人もいるとのこと。

HafHのサービス施設はわりと全国にあるようなので、次回また機会があれば他の場所でも宿泊も含めてワーケーションに使ってみたいですね。(余談ですが、別の機会で普通に旅行で宿泊した施設も偶然HafHの施設でした、びっくり)

ワーケーションに行って帰ってきて

結論から言うとワーケーション、こういった状況の中自宅にこもってばかりで普段の閉塞感のある環境からがらっと居場所を変えることで、最高のリフレッシュになりました。
今回は5日間の間2日だけ仕事という限られた期間でしたが、次回はまるまる一週間ぐらいどこかでワーケーションしてみたいという気持ちになっています。

遠くに行ってワーケーションしてみるのもいいですが、ちょっと足を伸ばした場所の河原とかで、キャンプ椅子持ち込んで仕事するとかもいいかな、とも思っています(その場合電源が問題になりますが、、)

次回に活かしたい点としては、割とでかけたい場所がいっぱいあるとほぼ観光に時間を割きたくなるので、仕事をするなら環境はきれいで良い場所だけどそこまで魅力的なスポットがないところでもいいのかなと少し思っています。

もちろん、こういった現況ですからわたしたちも、人の混み合った場所に行かない、食事のときはあまり喋らず、喋りたいときは食べ終わってからマスクして話すなど、色々気を使っていました。感染対策には気をつけて、できる状況にある方は楽しんでみるといいかもしれません。

夜フクロウからtwitter公式に画像アップロードするサービスを作りました。

夜フクロウは、@aki さんと@hydroxygenic さんの作られたMac OS X用の素晴らしく使い勝手の良いtwitterクライアントですが、
このサポートしているtwitpicがサービス終了を前に動かなくなり、他のMobyPictureやYFrogもいまいち使い勝手が良くないので、なんとか現時点で使い勝手の良いtwitter公式の画像アップロードを使いたくなりこのサービスを作りました。

使い方はこちらのサービスページヘ。
(文章と一緒に投稿できます、説明読んでね)
Twitpic API to twitter media upload gateway
https://lanieve.jp/picgw/


(※2018/7追加)
エンドポイントのURLを「http://lanieve.jp/」から「https://lanieve.jp/」に変更しました。
カスタムURLを設定されている方は一文字追加すればこれまでどおりご利用いただけます。
よくわからない場合は手順に沿って再設定してみてください。

phpとOauth関連ライブラリで2時間ほどで作成。
コードはお恥ずかしいのでお見せできるものではないのですが、特に難しいことはしていません。

OAuthトークンをそのまま渡して、twitter APIのupdate_status_with_mediaに送信、→(APIが廃止予定のため、upload.twitter.com+status/updateに変更)Twitpicのxmlで<image><url>にテキストを返却してあげればOK。
Twitpic API toと書いていますが、とくにurl以外の属性は返却していません。
他に、Twitpic API形式で使っているサービスがアレば拡張属性にも対応しようと思うので、お知らせください。

このサービスを見てpythonで自前のサーバ動作する同様のスクリプトを作られた方がいらっしゃるようなので貼っておきます。
どうやら機能的にも先行していらっしゃる模様。
https://github.com/gale2001/YoruProxy

javascriptで新規タブ/ウィンドウを作成する時の罠

javascriptのwindow.openにて、最近のブラウザにて新規タブで開きたいのに、新規ウィンドウで開いてしまうことがあり、ハマったので仕様をある程度まとめてみた。

先ず基本パターン

// 新規タブで開く
window.open('http://example.co.jp');

// サイズを指定すると新規ウィンドウで開く
window.open('http://example.co.jp', '_blank', 'width=800,height=600');

先ず最初の罠

// 新規タブで開く・・・?
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  window.open('http://example.co.jp');
});

上記の場合、一見新規タブで開くように見えるが
実際は新規ウィンドウで開いてしまう。

どうやらAjax等コールバックで呼ぶ場合は、ユーザーからのフックと見做されないため強制的に新規ウィンドウとなってしまうようだ。
コレを解決するためにちょっと微妙だが下記のようなコードで対応した。

// ちゃんと新規タブで開く。が、しかし・・・
var childWindow = window.open('about:blank');
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  childWindow.location.href = 'http://example.co.jp';
}).fail(function(jqXHR) {
  childWindow.close();
});

一旦about:blankで新規タブを作っておき、そこのlocationを変更させた。

ただ、こうした場合関連でヘンな事象が・・・

何故か、親ウィンドウを閉じると子ウィンドウを道連れにして閉じてしまう。別タブで開いているのに・・・

そのため、下記の対応をとった。

// 道連れにしない。 OK
var childWindow = window.open('about:blank');
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  childWindow.location.href = 'http://example.co.jp';
  childWindow = null;
}).fail(function(jqXHR) {
  childWindow.close();
  childWindow = null;
});

上記のように、新規タブのオブジェクトにnullを設定することによって、ちゃんと子ウィンドウを道連れにしなくてすむようになった。

ちなみに、 はじめに

childWindow.opener = null; や、childWindow.parent = null; また、 delete childWindow としてみたものの、どちらもうまく行かなかったので、
きちんとchildWindow = null; で空にしておくことが大事っぽい。

 

 

 

 

jQuery & jQuery UIの存在確認をする。

jQuery 及び jQuery UIの存在確認をしたい時、
下記のように書くとおそらくjsの読み込みのタイミング起因でjQuery UIの存在が確認できないことがあります。

if (typeof jQuery != 'undefined' && typeof jQuery.ui != 'undefined') {
  $(function() {
    console.log('do something'); // jQueryUIを読んでいても実行されないことがある
  });
}

その場合は、下記のように書くと問題ないことを確認しました。

if (typeof jQuery != 'undefined') {
  $(function() {
    if ($.ui) {
      console.log('do something'); // いける
    }
  });
}

行き詰まったらご参考に。

chatworkの未読を一気に消化するブックマークレットを作った

インストールはこちら→チャットワーク既読ブックマークレット

チャットワークで、それぞれのチャットの未読が中々消えずいらいらすることが割りとありがちです。

そこで、ブックマークレットを作りました。
該当のルームを開いてクリックするだけで未読が綺麗さっぱり消えます。

チャットワークのAjax通信を取得して、元々持っている変数を利用しているので特に認証などは必要ありません。

本当は今見てる箇所だけでなく全ルームの既読を消化するタイプも作りたかったのですが、うまくいかなかった・・・
(もしかしたら、一度ルームの情報を取得してから出ないとダメなのかも)

リンク先にはChromeのインストール方法が書いてありますが他ブラウザでも使えると思います。
(Mac chrome、Firefox、Safariで動作確認してます)

チャットワークの仕様が変更になったり、その他の理由で不具合が発生するかもしれませんので自己責任で。

 

chatworkの隠しコマンドっぽいものを探ってみた。

[info][/info] 囲み
スクリーンショット 2013-12-26 11.48.10

[info][title][/title][/info] タイトル付き囲み
スクリーンショット 2013-12-26 11.49.29

↑ここまでは結構メジャーかな。

[qt][/qt] 引用
スクリーンショット 2013-12-26 11.50.57

[qtmeta aid=ユーザーID][/qtmeta] ユーザーID付き引用
(あとで画像追加する)

[qtmeta aid=ユーザーID time=時間][/qtmeta] ユーザーID付き引用
(あとで画像追加する)

[rp aid=ユーザーID to=返信先] 返信([返信]の代替?)
(あとで画像追加する)

[hr] 水平線
スクリーンショット 2013-12-26 11.52.39

(ec14) シークレットエモーティコン – CEO(チャットワークの社長?)
スクリーンショット 2013-12-26 11.52.15

twitterのURLシェア数をAPI1廃止後でも(たぶん)取得できる方法

twitterのAPIv1廃止により未認証のAPIアクセスが使えなくなる影響で、twitterのURLシェア数が未認証のJS経由で取得できなくなると噂みたいです。

ここの記事でもお詫びられてましたが・・・

そしたら、公式のtwitterウィジェットではどうやって取得してんの?!
と思って調べてみたところ、こちらのコードで引き続きシェア数が取得できるっぽいのでメモっておきました。

※あくまでtwitter非公開APIのため、使えなくなる可能性があるのでご注意を。

・jQuery (targetURLは取得したいURLに。location.hrefに設定して今のページ取得してもいいかもね!)

$(function(){
  targetUrl = 'http://lanieve.jp/';
  $.ajax({
    url : 'https://cdn.api.twitter.com/1/urls/count.json',
    data : {
      'url' : targetUrl
    },
    dataType : 'jsonp',
    success: function(data, status) {
      $('#countArea').text(data.count);
    },
    error: function() {
      $('#countArea').text('NG');
    }
  });
});

・html

count: <span id="countArea"></span>

View Demo

どうやら、cdn.api.twitter.com のAPIは他のtwitter widgetでも使っているらしく、TLの取得などもできるらしい、で、そういう記事も見つかって二番煎じになってたけどもう書いちゃったからそのまま公開してしまおう。
(そういえば、今まで使われてた廃止予定のAPIも、公開される前にこうやって見つけてたっけ)

 

 

Wifi内蔵SDカード「flucard PRO」を使ってみた

最近規格策定とかで盛り上がりつつWifi内蔵SDカードですが、
この分野では昔から有名なEye-fiカードが欲しいなー などと思っていたけど、
写真を全部取得してからダウンロードしないといけないとか、メインはサーバーアップロードだったり、
そのまま直接iPhoneに取り込んだりしたいなーといった要望にはいまいちマッチしなかったのですが、
密かにEye-fiとか東芝のSDカードの裏で、シンガポールのTrekという会社からflucardとかいう無線Wifiカードが出ていたので購入してみました。

このflucard、日本ではプラネックスが代理店として販売しているみたい。
マニュアルもファームウェアもばっちり日本語化されていて良い感じです。

購入したのはNTT-X Storeから。
Amazonでも8GBのタイプが最安値で5,980円だったのですが、
会員価格で4,268円。しかも送料無料でした。在庫僅少らしいので、欲しい方はお早めに!

なによりこのSDカードで嬉しいのは、ブラウザやiPhoneなどのクライアントが用意されていて、
そこから欲しいファイルだけサムネイルで選んでダウンロードできること。
これはかなり良いポイントですよ。

パッケージはこんな感じ。

青系のなかなかすっきりしたパッケージで好感持てますね。

早速使ってみたいところですが、
最新のファームウェアアップデートでWPA2対応や、RAWファイルへの対応もしているようなので、
安定感という意味でも先にファームウェアアップデートしてみました。

まず、カードをカメラに刺して、再生モードにします。
ここで特異なのは、再生すると出てくる画像ファイルを削除(!)して操作するとのこと。
以前はDPOF指定して振ったりしても操作できたみたいなんですが、最新ファームではなくなっていました。

↓のような画像が出てくるので、この画像を削除します。

ここで注意したいのは、再生モードにしてすぐだと削除してもモード起動しなかったりします。
ビープ音がするので、それが鳴り止んだら削除するとちょうどいいみたい。

失敗しても、電源入れ直したりカード抜き差しすれば画像復活するので、その辺で何とかします。

ブラウザで「http://flu.card」か「http://192.168.1.1」に接続すると、設定画面が表示されるので、
ファームウェアのバージョンを確認して、古かったらアップデート。
(ネットワークのIPがカブってると表示されないので注意)

アップデート方法は、
PCのSDカードを接続するとNO NAMEのありがちなSDカードフォルダが出てくるので、
そこにサイトからダウンロードした最新ファームウェアを解凍した内容をルートディレクトリにコピー。
SDカードを抜いたら、カメラに挿しなおして放置すると、昔のゲーム機のゲームオーバーみたいなビープ音がずっと鳴り続けるので、鳴り終わったらアップデート終了です。だいたい2〜3分くらい。
(カメラの電源が切れると失敗するので、オート電源オフは解除しておくように!)

アップデート完了して、再度設定・画像閲覧の画像を削除して接続して、設定画面が表示されればOKです。
設定では、APのSSIDとパスワードを変更しておきました。

サーバー自動アップロードの設定もできるのですが、私はその方法ではあまり使わない予定なのでその辺は放置。

今度はiPhoneのWifi設定で先ほど設定したSSID&パスワードで接続したら、
事前にダウンロードしておいた「flucard download(Lite)」アプリを開いたらすぐサムネイル一覧が出てきて、
さくっとダウンロードできました。

アプリはこのほかにもiPhone、Android、Windows、Mac向けに出ているのですが、
他のは全部有料(250円とか)なのが残念・・・

まあ、必要に応じて他のアプリもダウンロードしてみようかと思います。
ちなみにiPhoneのflucard downloadのLiteと有料版との違いは、いっぺんに複数ダウンロードできるかの違いらしいです。

あとは直接Flickrにアップロードできるアプリも気になる所。

ちょっと使ってみた感触ですが、なかなかいい感じです。
若干人柱感ありますが、安いので買ってみて損はないかと!

最後にGF1で撮って、flucard経由でアップロードしたテストショットでも乗っけておきましょうかね。

Google+退会した。

退会理由に以下の内容を入力して退会しました。

本名を強制しようとするが、コンテンツの質が見合っていない。
また、本名を強制する割に知らないユーザーからの大量のフォローがあり、プライバシーに配慮しているとは思えない。
不適切にプライバシーを侵害する可能性が高い。

結局このとおりなんですが。

一度名前を「子狐たゅん」で登録して、停止させられてしまったので本名に直したんですが、毎日のように来る良く知らない人のフォロー(twitterと比にならないほど多かった)に嫌気がさした。
それから流れてくるストリームの内容も本名を明かしてまで取得に値する内容ではなかった。

ということで、また「子狐たゅん」に戻して、だんだんアクティブユーザも少なくなってきたので放置していたんですが、先日一言だけ他人の投稿にコメントをしたんですが、これがきっかけになったようで、再度プロフィール審査対象になってしまいました。

以前よりいきなり停止させられるわけではなくなった面でゆるくはなったと思うんですが、
猶予設けられただけで基準は変わってないみたい。

仕方が無いのでどこかで本名でなくても審査が通るという話を聞いたので、
Amazonで本を出したことがあったのでそこの書籍の発行ページを提示しました。

その後英語で「審査したが、コミュニティガイドラインに沿わない」とのことで、
再度正しい名前を申告するか、さもなくば辞めろ、とのことだったのでやめさせて頂きました。

今後仕事で使うこともあるかな、と思ったけど、そこまでプライバシーに無思慮なGoogleなら今後も発展していくことはないでしょう。

近々GDDに招待していただいただけに残念です。

WindowsPhone7.5の開発をやってみよう!(2)

WindowsPhoneSDK7.1正式版出ましたね。

そんな訳で、普通に前に使っていたRCを削除後、普通にインストールできました。

今回は実機テストや公開に必要な手順、AppHubへの登録をしてみようと思います。

スマートフォンアプリ選手権の参加特典でAppHubの登録キーを手に入れたので、それを使ってみようと思います。

続きを読む