技術的な話題 に関する投稿を表示しています

Dropbox の Public なフォルダで Web ページのホスティングができなくなって

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

タイトルどおりです。

ちょっと前までできていたのですが、最近できなくなったようです。

Dropbox で簡単に自分のサイトを作ろう!みたいな記事も一時期はやっていましたが、今やそれらも全滅ですねきっと。

ごみばこいんでも、ヘッダーメニューの「倉庫」は Dropbox の Public フォルダを利用していたのですが、だめになってしまったので、いったんメニューから消しておきました。まあ、大したものはないのでいいのですが…。あ、 Unity のものなんかはたまに見せたりするので、見えるようにしないとダメかなあ…。

 

でもって、解決方法あるのかと思ってしまったので、ググってみたらこんなものが。

https://www.reddit.com/r/webhosting/comments/55qye7/dropbox_html_alternative/

要するに

・Dropbox は HTML のレンダリングをやめたよ  (←レンダリング…??)
https://htmldrop.com/ とかっていう外部サービスを使うといいよ!
・いやいや Github Pages なら無料だしこっち使おうぜ!

▼2017/10/06追記

htmldrop というサービスは終了してしまったようです…?

代わりになりそうなのを見つけたのでここへ> BoxHop - Website hosting with Dropbox

▲追記ここまで

と、いうことらしいです。

まあ、とりあえずごみばこいんの倉庫ページは消えたままでいいや。

最近のやったこと

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

機械学習してる気持ちになっている

雑にTensorflowからこの世界に入門したけど、わからなさすぎたので
Python+scikit-learnから出直そうとしている。

https://www.tensorflow.org/

http://scikit-learn.org/stable/

そしてこのあたりを読んだ。

[amazonjs asin="4873116988" locale="JP" title="実践 機械学習システム"]

[amazonjs asin="B01HGIPIAK" locale="JP" title="Python機械学習プログラミング 達人データサイエンティストによる理論と実践 impress top gearシリーズ"]

用語や仕組みがわかってきたので、一段と楽しくなってきた。

機械学習すげーーーーーー

 

AWSぽちぽちしてる

某所でLINEBOTやろうぜ!みたいな話になって、環境用意することになった。
Terraformを使いたかったので、いい感じに使ってAWSぽちぽちした。

TerraformでAPIGatewayとEC2をもりもり立てて、Itamaeでプロビジョニングした。

https://www.terraform.io/

http://itamae.kitchen/

これがめっちゃ楽しすぎて、LINEBOTの記憶がない…。

 

 

エンジニアってたのしいなー

ぼくのぼくによるぼくのためのマークダウンエディタを作ってるところだからちょっと待って

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは、ごみばこです。

世の中にはさまざまなマークダウンエディタがあります。

そして、ふつうのエディタにも、プラグインとしてマークダウン機能を搭載することができるものも多々あります。

しかし、どれも自分のほしい機能が整っていないので、自分で作る事にしました。
地産地消!!(違)

ほしい機能としては、こんなところでしょうか……。

  • 画面が2分割されてエディタとプレビューが並べて見れる
    • いま編集している箇所までいい感じにスクロールしてくれる
  • azuさんのtextlint(http://textlint.github.io/)による文字列のlintをしたい
    • ルールを状況によって切り替えたり変更したりしたい
    • 怒られているポイントをハイライトしてほしい
  • "プロジェクト"で縛られず、自由にファイルを開け閉めしたい
    • ※atomはこれでNG
  • タブにしたい
  • 整形されたHTMLをコピーしたい
  • emojiも使いたい
  • 軽快に動いてくれる

イメージはkobitoがすごい近いです。あれにtextlintが乗った感じです。
http://kobito.qiita.com/win

というところで、Electronでさくさく作ってます。で、エディタっぽい動きまではできました☆
デザインも細かい機能もさっぱりや……、というわけで、これからブラッシュアップですね!><

ここまでできている

ちょっと時間がとれてなさ過ぎてアレなんですけど、もうちょっと出来上がってきたら、いろいろ出していきますかねー。

それではまたー

話題のLINE BOTでちょっとだけ遊んでみた

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

目次

  • ムムッ!8秒に1人登録者が増えるんです!
  • 実装について
  • SSLが通らない
  • API Gatewayの設定を間違える
  • でばっぐがむづかしい
  • 画像サイズ制限
  • 構成上の問題
  • おわりに

Qiitaやはてブでよく見るほどに巷で話題のLINE BOTですが、私も参戦してみました。

BOT API Trial Accountのご紹介 | LINE BUSINESS CENTER

ムムッ!8秒に1人登録者が増えるんです!

できたbotがこちらです。
13000133_1058043724268365_4544060361943443361_n

顔写真を送るとムムッなカードを結合して送り返してくれます。

ちゃんと複数人も認識してます。

1460689208363

(社内の人に協力してもらいました。ありがとうございます!)

出来たこのbotを公開したい気持ちはやまやまですが、ムムッな版権や、アーキテクチャやら実装の問題もあってちょっとNGです。

コードなら公開できるので、またのちほど。。

実装について

LINE BOTのコールバックとして、画像の場合はテキストとは異なるデータがやってきます。
そのとき、LINE側に対してメッセージIDでリクエストをすると、そのデータに紐づくコンテンツ(画像、動画、スタンプ…)を受け取ることができます。
(詳細はドキュメント参照: LINE Developers - BOT API - API reference

こうして受け取った画像をそのまま顔認識に送っています。この部分には、Face++というサービスを利用しています。

Face++: Leading Face Recognition on Cloud

戻ってきた情報には、顔の位置を始め、目の位置や口の位置、さらには表情データなども含まれています。
この顔の位置、目の位置を計算し、カードの画像に対してサイズ調整・回転を施して、合成しています。

出来上がった画像を、LINEに送信することで、BOTのレスポンスになります。


はてさて、参戦していくなかで、初めてやることだらけで非常にわくわくするとともに、
すごい詰まったことがいくつかあったので、それらを書き綴っておきます。

SSLが通らない

LINE BOTには、コールバックとしてSSLなURLを指定しなければいけません。
しかし、すでに各所で話題に上がっているように、Let’s Encryptでは通信の確立がうまくできないいようです。

そこで、今回はAWSのAPI Gatewayを利用してみることにしました。

Amazon API Gateway (API を容易に作成・管理) | AWS

「ひとまず試してみる」というこで構成としては以下のようになっています。

<span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">VPS </span>-> <span class="hljs-constant">LINE</span>

API Gatewayの設定を間違える

これは完全にうっかりミスです。

LINE BOTのコールバックはPOSTメソッドで飛んでくるのですが、GETメソッドしかAPI Gatewayに登録してなくて、数時間を無駄にしました。。ちゃんとドキュメントを読もう!

また、API Gatewayでは指定したHTTPヘッダがプロキシされていくので、シグネチャについても指定しないといけません。

でばっぐがむづかしい

LINEでメッセージや画像を送ってはサーバのログをみて、という結構無駄な開発作業をしていました。

よくよく考えれば、メッセージやりとり部分は後で繋ぐようにし、コアな処理を別に実装したほうがよいですきっと。
メッセージやりとりをあとで繋ぐようにすることで、LINE以外にも各種bot系に組み込むことも簡単にできると思います。
そしてテストも書きやすくなるので…。。

画像サイズ制限

これもドキュメント読もう案件です。。

LINEにメッセージを送る際、画像はJPEG限定、1024px x 1024px以下にしないといけないようです。
また、プレビュー用の画像を用意する必要があり、こちらもJPEG、240px x 240px以下にしないといけません。

どちらの画像もURLとしてアクセスできる場所に設置し、そのURLをLINEに伝えることでbotが送信してくれます。

構成上の問題

いまはお試しということで、コールバックへのリクエストが来たら、メッセージを送信を含むすべての処理をしています。しかし、この方法では、人が増えてきたときにサーバ負荷が上がり、快適なレスポンスが得られなくなってしまいます。
(※現状でも顔認識や画像処理でラグがあるので快適とそうでないのぎりぎりくらいです。。)

どうすれば快適なレスポンスが得られるかについては、すごい分かりやすく深い記事が上がっています。

大量メッセージが来ても安心なLINE BOTサーバのアーキテクチャ - Qiita

今の構成は以下のようになっています。

<span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">VPS </span>-> <span class="hljs-constant">LINE</span>

これを・・・例えばこう、えいやっと・・・

<span class="hljs-constant">Callback </span>     <span class="hljs-symbol">:</span> <span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">AWS SNS </span>-> <span class="hljs-constant">AWS SQS</span>
<span class="hljs-constant">Execute Batch </span><span class="hljs-symbol">:</span> <span class="hljs-constant">AWS SQS </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">Another API </span>-> <span class="hljs-constant">AWS SNS </span>-> <span class="hljs-constant">AWS SQS</span>
<span class="hljs-constant">Response Batch:</span> <span class="hljs-constant">AWS SQS </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">LINE</span>

うーん、どうなんでしょうかね…w

あとは記事に書かれているように、メッセージに対する並列処理をできるようにすると、快適なレスポンスが得られるようになってくるのかなあ、と思います。


おわりに

Facebookもメッセンジャーbotやるよ!と発表があったように、botの波が来ています。

みなさんが開発したり運営しているようなWebサービスであったり、流行りつつあるIoT、TensorFlowといった機械学習、などなどなどに加えたメッセンジャー系botのコラボは、きっと新たなユーザー獲得やユーザー体験をもたらすと思います。

まずは触ってみて、どんなことができそうかを考えていくときっと楽しいとおもいます!

Electronで社内ツールを作った話をしました / #JSオジサン #6 2日目

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

JSオジサン#6 2日目 で喋っていました。


こんにちは。ごみばこです。

最近はLaravelオジサン…ですかね。たーまーにJSオジサンしてます。
…いやいや、年齢的にはまだまだオジサンじゃなくて、お兄さんですよ。

JSオジサン#6 2日目

満員御礼!! JSオジサン #6 「まさかの3日間連続開催だよ!」2日目
https://atnd.org/events/71990

今回のJSオジサンも21cafeさんでの開催です。
いつもありがとうございます!そこそこキャパが広くて、スライドも見やすくて、立地もよし。快適環境です!

さて、今回のJSオジサンでは、言ってしまえば勉強会駆動開発のような「せっかくだから」精神で登壇者側に参戦しました。

せっかくチャンスがあるから。
せっかくElectronやってみたかったから。

せっかくだから作ってみた系の話をしました。

Electronで社内ツールを作ったお話 from sters9

すこし解説をいれます。

ハイテンションキャラ

LT5分だし、Electron超感動したし、実際ほんとすごいから、
ハイテンションキャラで「サイコー感」を出していこう。

という思いのもとで、こういうスライドに仕上げました。
普段からこんなじゃないですよ!!!!!

偶然にも、ハイテンションノリが他の人と被っておらず、「Electron」という流行ネタも被らず、
いい感じに印象づけはできたのかなと思っていたりします。

社内ツール1

「なんとかかんとかーベイ」ってサービスの管理画面が、Flash製でもっさりでつらい。
というところから来ています。

当初はブックマークレット超がんばっていたのですが、人によっては動く動かないとかで、
こまめな対応や更新が面倒になってしまったので、いっそElectronでつくったろか、と。

いうのは実は後付けで、作ったのは一年前?とか、かなり前になります。
当時はnode-webkitを使って作ったのですが、「まあ、だいたいイメージ一緒だし…」というノリで入れました。

このときnode-webkitを触って、なんだかいい感じ!なんだけどなんだかなあ…
という気持ちがあったので、ここにきてElectronいい感じ!!という話を聞いてずっとやりたいと思っていたのでベストタイミングですね。

社内ツール2

Confuluenceのクライアントアプリです。

Qiitaで見かける、チャットワーククライアントアプリと同じように、
「webviewタグ」を使って、いわゆるガワネイティブと呼ばれる仕上がりにしています。

APIなんかも提供されているので、Confuluence内の色んなデータをばっさばっさ取れて、フルに画面を構築することも可能でしょう。ただGET系のリクエストは、JIRAやBitbucketなど、別のAtlassian製品を使ってると、そっちの情報が降ってきたり、 混在していたりすることもある(主にActivityStream)ので、扱いには気を付けないといけないこともあるかと思います。
オンプレの場合はちょっとわからないです…。ヘーシャはクラウドの方を利用しているので…。

そして、もしかしたら「最強のConfuluenceクライアント戦争」の到来…!?
参考:最強のTwitterクライアント戦争情報( http://r7kamura.hatenablog.com/entry/2015/08/25/154846


さてさてガワネイティブをしたとき、イケてない中身とかほしい機能を付けるためにもあれこれいじくりたくなりますよね?

ただ、Electronでは、Electronアプリを動かすプロセス、ウィンドウのプロセス、webviewのプロセス、といった具合に、それぞれの画面(?)は簡単にはつながっていないのです。
そんなとき、IPCと呼ばれるプロセス間通信の機能を使うことで…

うーん、長くなりそう…。このあとはまたどこかで書きます。


ツール2のConfuluenceクライアントアプリについては、、いかんせん急ごしらえな部分がおおく、正直見せられるようなものではない残念施構成なのでうーん。

そのうち、またElectronの話を書きます。
感動したので熱はしばらく冷めないことでしょう。

それではまたー(*'ω'*)


ア!1日目も参加者だったので、また参加レポあげます!!!

私立プログラミングキャンプ2015 Tokyoに参加してました。

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

ピクシブさんにて、土日通しの泊まり込みハッカソンでした。

途中でちょこっと寝てしまったようですが、ほぼほぼ完走しました。

(ただし成果がついてきているとは言っていない)

ありがとうピクシブさん。
ありがとうゲヒルンさん。
ありがとうオプティムさん。

やったこと

・ごみばこいんのマルチプレイ対応(仮)
・誤字脱字検出っぽいなにか
・ごはんをたべる
・ツイッターを見る
・アニメを見る

ごみばこいんのマルチプレイ対応(仮)

作業時間の7割くらいをここに費やしました。

過去に一度やっていたのですが、ソースコードが消えてしまい…。

ということで、改めて作っていました。

サーバサイドでそれっぽい動きをするものを作り、ある程度の頻度で同期するようにしたら、
クライアント側の動きとサーバ側の動きが異なりすぎて、ひどいラグが起きているかのような同期性能になりました。

memo

ひどい…。

以前おこなっていた方が、WebSocketで高頻度で同期していたので、安定してくっついていましたが、
ちょっとこれではだめですね。

また出直してきます。

誤字脱字検出っぽいなにか

ちょっとした都合で、誤字脱字を判定したいなーという都合があり、
それっぽい実装でできるのでは?と思って試していました。

実装としては、機械学習のようななにかになっています。

よしなにわかち書きのようなことをしてからの、
前後の出てくる文字列を数えて、データとして持っています。

入力値に対しても同じように処理し、
もっているデータと付け合わせてレーベンシュタイン距離的なものを出し、
一番近いものを出す、だけです。

超簡単!!

が、たとえば、漢字が変換されてないとか誤変換とか、
「よしなにわかち書き」が雑すぎて、実用にはちょっと無理すぎるレベルでした。

その問題あたりをちゃんとしたら戦えそうな気がするので、
また試してみます。


tmp

ごはんをたべる

パンがメインでした!!!

あとエナドリ!!!

ビタミン不足しそうだったので、ウイダーインゼリー的なのも食べてました!!!

ツイッターを見る

ひと段落つくたびにツイッターみてました。

久々にまじまじ見てましたけど、結構おもしろいですよね。ツイッター。

アニメを見る

アニメを見ながらコード書いてました。

最近はやりの、友利奈緒さんを見ました。
非常に残念なことに、私には友利奈緒さんの良さがさっぱりわかりませんでした。
もうちょっと見るといいんですかね~。

あ、伊波まひるさんはかわいかったです。
良さがありました。

おわりに

ハックしてる感の高いハッカソンめっちゃ面白いのでまたやりたいです!!!!!!!

次はISUCONか~~!?!?!??

アクセスログとかまったく取れていなかった

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

さってー。ひさびさにアナリティクスでもみてみっかー☆

いやさすがに、弱小だけどちょいちょいアクセス来てたし0ってことは…。
つーか、5月のハッカソンやったときとかそれなりに来たはず……えー……

 

 

 

 

 

 

まてまて、アクセスログはそれなりに残ってるのでは。

.

はい(真顔)

 

11日から気づいていたけど改めて確認したってワケです。

なんでしょうね。
サーバを移動したときにミスったとか、パフォーマンスあげようぜウェイってやったときにミスったか、くらいしか思いつかないですね。

ぽいぽいぽいぽぽいぽいぽぴwww

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

POIを使う機会がちょこっとあったのであれこれしたのはいいんだけど、
うまくできなかったという話です。

◆前提

  • エクセルでテキストボックスを設置
  • Javaで任意な文字列をそのテキストボックスに突っ込みたい
  • POI 3.8 (3.9でも同じっぽい)
  • Overview (POI API Documentation)

◆関連クラス

  • HSSFWorkBook:ワークブック
  • HSSFWorkSheet:ワークシート
  • HSSFPatriarch:描画領域?
  • HSSFShape:オブジェクトの関係の抽象クラス
  • HSSFSimpleShape:四角とか簡単なオートシェイプとか
  • HSSFTextbox:テキストボックス
  • HSSFClientAnchor:シート上の座標を示す
  • EscherAggregate:これはちょっと違うっぽい
    >> MSODRAWING and OBJ record combinations って書いてあった

◆やったこと
1. エクセルで設置したテキストボックスを操作しよう!

List<HSSFShape> shapes = sheet.getDrawingPatriarch().getChildren();
for (HSSFShape shape : shapes) {
	if (shape instanceof HSSFTextbox) {
		// !!ここにこない!! //
	}
	if (shape instanceof HSSFSimpleShape) {
		// うおーきたー //
		// poi 3.8 //=> Method not found.
		// poi 3.9 //=> エラーは無い。あとでファイルが開けなくなる
		((HSSFSimpleShape) shape).setString(new HSSFRichTextString("hogehoge"));
	}
}

2. テキストボックスはPOIで設置しよう!

HSSFPatriarch patriarch = sheet.getDrawingPatriarch();
HSSFClientAnchor anchor =
	new HSSFClientAnchor(10, 10, 100, 50, (short)1,(short)1,(short)1,(short)1);
HSSFTextbox textBox = patriarch.createTextbox(anchor);
HSSFRichTextString text = new HSSFRichTextString("1");
// フォント設定
// text.applyFont(sheet.getColumnStyle(0).getFont(sheet.getWorkbook()));
textBox.setString(text);

// !なにが原因かわからないけど該当シートがぶっ壊れる! //

◆結論
(◞‸◟)エクセルまぢやみ…

トップページに新機能を付けたいって

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

どうも。ごみばこです。
探しものは見つけにくいものです。まだまだ探します。
夢の中へ行っている場合じゃないです。


それはそうと、トップページを少しいじろうかと、やってみます。
なんにも進んでないですがちょっと紹介。

サーバ側で計算してどうこうとかなんとかかんとか。

そのうちできます多分。

トップページを更新しました

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

seccon記事以来となりますね。

トップページをスマホ対応しようしよう思ってトントンと流れていたのですが、
もくもく会に参加した際に、この前見つけた物理エンジンを使ってみようと
切り替えたらスマホ対応いけちゃった感です。

ぷあさんとぐらぷすの愉快なもくもく会
http://www.zusaar.com/event/10387003

具体的には、Matter.js というものを使用しました。

Matter.js
http://brm.io/matter-js/

 

いままで、box2d-jquery を使って、DOMから構築しDOM更新されていく、なのですが、
今回は、全部js側に持って行き、そっちで全部動く、という形です。
(ので、今までDOM更新されていた分の処理が消えるのでぬるぬる感がでる、はず!)

加えて、スマホサポートもしているらしく、物理エンジン周りについては
とくに何もせずともスマホ対応できちゃいました。

ただ、スマホで見た時の画面がしんでいたので、cssをいじったり、iframeの幅をいい感じにしました。

 

ぜひスマホでもお試しあれ。


(追)

エイプリルフールからそのまま残っていた、
ゴミを吐き出していく処理はこのタイミングで消しました。

そのままではなんだかもったいないので、機能は残し、
ボタンを押すと吐き出すようにしています。

1 2 3 4 5 6 7 8 9 10 11 12 13