tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

chatwork api危なくね?

技術ネタ。

※セキュリティの知識がほとんどないけど偉そうに書くよ!

chatworks api
http://developer.chatwork.com/ja/authenticate.html
いろいろいじってみた。簡単。

危なくね?①

まず、ここでtoken取得

HTTPリクエストヘッダに X-ChatWorkTokenと言うキーをセットして取得したtokenをvalueへ。

認証完了。

これブルートフォースアタックくらったらどうなんの?
記憶上だとtokenが結構短かった気がする。まぁ対策してんだろうけど。

危なくね②

roomidが連番(だった気がする)
適当な数字で大体該当。っかこれkeyじゃね?
http://developer.chatwork.com/ja/endpoint_rooms.html

危なくね③

重要
APIトークンは有効期限がなく、機能にフルアクセスが可能なものになっています。第三者へ開示しないよう取り扱いには十分ご注意ください。また、APIトークンはURLのクエリストリングではなく必ずHTTPリクエストヘッダで送信するようにしてください。

アカン

危なくね?④

ユーザー数が多い。
ここにも書いてあるけど10万社導入(すげぇ)。100〜500万ユーザーぐらいいそう。
http://blog-ja.chatwork.com/2016/06/cwblog_16.html?m=1
多ければその分のtoken、roomidとか発行されてるから大丈夫なんか?

ドキュメントの拡張子がhtml

mvc使ってない?ベタがき?

感想

slackで良くね?

1円も掛けずにたった4時間でWEBサービスを作ってみた

タイトルの通り「1円も掛けずにたった4時間でWEBサービスを作ってみた」です。

作ったWEBサービスはこれです。

f:id:tekitoumemo:20170910154905p:plain
picpic - アルバムを検索してアルバムアートワークを見つけよう!

picpicとは?

ちょっと探しずらいCDのジャケットを視覚的に検索してダウンロードできるサービスです。
Google画像検索などジャケットを探せるサービスはあるのですが、画像を選ぶ手間があります。その選ぶ手間を削減するためにもパッと見で選べる良さが「picpic」にはあります。

なぜ作ったか

  • 自分のポートフォリオが少ない。。
  • デザインがいかしてるサイトを作りたい。
  • お金ないけどなにか作って公開したい。

などなどいろいろありますが、自分の作品を世の中に出したいと言う自己満的な要素が一番強いのかもしれません。

本当に4時間で出来たの?

本当に出来ました。開発からサーバー作ってアナリティクスの設定まで4時間で出来ました。「WEBサービスを作ってみた」系の記事は多いですが、それらのサービスに比べ「picpic」は限りなく手抜きをして作っているのでここまでのスピードで出すことが出来ました。※頭の中で考えている時間は省きます。

僕の技量

27歳 男
社会人5年目のエンジニア

  • C# 5年
  • JS,Jquery 3年
  • Angular 1年
  • html 2年
  • その他 VB.NET、VB6、Ruby(かじった程度)、Cobol(笑)

いろいろやってますが、サーバサイドエンジニアが本職です。

利用した技術やリソース

Bootstrap
JQuery
xdomain
LOGO MAKER

制作のタイムスケジュール

9/9 23:30 bootstrap選定
9/9 23:50~25:00 開発
9/10 11:00~12:00 開発(微修正)、
9/10 12:15~12:30 ロゴデザイン、ロゴ制作
9/10 13:00~14:00 サーバ構築、デプロイ、アナリティクス、googleインデックス送信

良かったこと

名前、デザインなどのこだわりどころに時間をかけない
デザインはBootStrapを使い、ほんの少しいじったぐらい。こだわりどころの名前とデザインは嫁と一緒に考えて即決めた。
動いた時点でデプロイ
ローティングとかサイズを選んでダウンロードとかさせたかったけど、後回し。とりあえず、使える段階まで持って来ればOKという気持ちでやった。
1円もかかってない
xdomainはマジ優秀。htmlサーバーなら1Tまで無料でJSは動くから簡単なサービスは無料で作れる。しかも、登録したらすぐに使えるので非常に便利ですね。※xdomainのまわしものじゃないよ!
サイトが閉鎖する心配がほぼない
たぶん無料レンタルサーバーはやめないと思うんだ。いきなりやめますはxdomain的にも結構なリスクだし。「WEBサービス作ってみた」系はレンタルサーバの解約で閉鎖してることが多いからそこは安心かな?代替えは必ずあるから復活出来るし!

悪かったこと

詰まったところは後回し
デプロイしたらアクセス権かなんかでSNSロゴが404になったけど放置して違う対処した。原因はわからないけど解決できそうな気がするから調べたほうが良かったかも

誰でも4時間で出来るの?

僕はJquery、htmlの知識がある程度あったのですべてを4時間で出来ましたが、知識ない人だと1週間ぐらい見ておいたほうが良いかもしれません。ただ、僕もスキル的には普通だと思っているので、臆することなく「作りたい!」って気持ちがあったら作ってほしいと思います。

WEBサービスを作りたいと思ってる人へ

WEBサービスを作ってみた」系の記事を見ると超人的な感じがしてモチベーションが下がる人が多いと思いますが、htmlだけでもWEBサービスは作れます(しかも無料で。僕もサーバーサイドを含めたサービスを作りたいという気持ちはめちゃくちゃありますが、やることが多すぎでいつの間にかモチベーションが下がることが多いです。まずは簡単に出来るものを作ってみてサイトの運用をやってみることが大事だと思います(アナリティクスやサイトの宣伝など)。結局は外部からの刺激で自分のモチベーションは上がるので、そこからサイトの改善など、出来ることを増やしていくのが一番サービスを立ち上げやすい流れだと思います。あれ出来ない、これできないでなにもしないのは良くないので、出来ることから世の中に発信していきましょう(サービス立ち上げても宣伝しない限り人はまったく来ないから恥ずかしがらずに!)

最後に

今まで作ったサービスはこれらです。github載せてますが、コードを見るとクソ過ぎて驚愕します(今の自分も驚愕してる)。
こんなんでも作れるんだぞ!ってのを知ってもらいたいので、臆せずにどんどん作っていきましょう!

f:id:tekitoumemo:20170910172142j:plain
ITunEsTooL - あなたのiTunesを快適に
f:id:tekitoumemo:20170910154905p:plain
picpic - アルバムを検索してアルバムアートワークを見つけよう!

githubのURLを見たい方は「exkurumizawa@gmail.com」までお問合せ下さい(ここには載せません

会社サボってITunesAPiをいじった話

技術ネタ。


会社サボって(38℃あって体怠い)久しぶりにプログラムしたよ!
5年前に作った「ITunEsTool」ってのがあってGoogle Image Search APIがサービス終了になったんでずっと放置してた。






ITunEsTooL - あなたのiTunesを快適に

tekitoumemo.hatenablog.com
tekitoumemo.hatenablog.com

画像取得系のAPIはほとんど規制かかって実装してもすぐボツりそうだなぁと思って一生放置しようと思ったらITunesAPiというものがあったので実装してみた。

リクエスト(詳しくはココ

https://itunes.apple.com/search?lang=ja_jp&entry=music&media=music&country=JP&term={検索キーワード}&limit=100

コード

    // serchWordは検索キーワード
    // NugetにてRestSharpってのを使ってる
    var client = new RestClient(string.Format("https://itunes.apple.com/search?lang=ja_jp&entry=music&media=music&country=JP&term={0}", serchWord));
    var request = new RestRequest(Method.GET);
    request.AddHeader("cache-control", "no-cache");
    IRestResponse response = client.Execute(request);

レスポンスに「artworkUrl」ってのがあるんだけど100×100の画像で小さすぎるので以下で対処。

リクエス

https://itunes.apple.com/search?lang=ja_jp&entry=music&media=music&country=JP&term=purpose&limit=1

レスポンス

{
    "resultCount": 1, 
    "results": [
        {
            "artistId": 320569549, 
            "artistName": "ジャスティン・ビーバー", 
            "artistViewUrl": "https://itunes.apple.com/jp/artist/%E3%82%B8%E3%83%A3%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3-%E3%83%93%E3%83%BC%E3%83%90%E3%83%BC/id320569549?uo=4", 
            "artworkUrl100": "http://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/100x100bb.jpg", 
            "artworkUrl30": "http://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/30x30bb.jpg", 
            "artworkUrl60": "http://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/60x60bb.jpg", 
            "collectionCensoredName": "Purpose", 
            "collectionExplicitness": "notExplicit", 
            "collectionId": 1049381490, 
            "collectionName": "Purpose", 
            "collectionPrice": 1200.0, 
            "collectionViewUrl": "https://itunes.apple.com/jp/album/purpose/id1049381490?i=1049382087&uo=4", 
            "country": "JPN", 
            "currency": "JPY", 
            "discCount": 1, 
            "discNumber": 1, 
            "isStreamable": true, 
            "kind": "song", 
            "previewUrl": "https://audio-ssl.itunes.apple.com/apple-assets-us-std-000001/AudioPreview122/v4/75/86/68/75866889-34af-0608-33f0-7b66c1975d79/mzaf_790555538368794394.plus.aac.p.m4a", 
            "primaryGenreName": "ポップ", 
            "releaseDate": "2015-11-13T08:00:00Z", 
            "trackCensoredName": "Purpose", 
            "trackCount": 21, 
            "trackExplicitness": "notExplicit", 
            "trackId": 1049382087, 
            "trackName": "Purpose", 
            "trackNumber": 13, 
            "trackPrice": 250.0, 
            "trackTimeMillis": 210151, 
            "trackViewUrl": "https://itunes.apple.com/jp/album/purpose/id1049381490?i=1049382087&uo=4", 
            "wrapperType": "track"
        }
    ]
}
http://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/100x100bb.jpghttp://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/500x500bb.jpg

取得できる画像はこんな感じ(「Purpose」は神)
http://is3.mzstatic.com/image/thumb/Music6/v4/ff/27/0e/ff270e68-6d4a-d0f9-29be-df64038f4255/source/1000x1000bb.jpg


あんま調べてないけど1500×1500までなら取得できそう。

そんなこんなでサイト復活。サイトの掲載依頼と昔載せてくれた雑誌に営業メールして終了(意外に返信率が高くてびっくり)。実績的なの送ったら以外にいい感じだったわ。

■ダウンロード数
5000ダウンロード
■掲載サイト:
Vector
窓の杜
フリーソフト100
・オールフリーソフト
フリーソフトナヴィ
■掲載雑誌
・Mr.PC
・iP!(アイピー)

こんなんやってっから風邪が治らんのだな。。
まぁ、ソースコードとかクソ過ぎて見てもいられなかったけど久しぶりにやるのはいいと思いました。

買ってよかったもの(車編)

まずはこれを見て欲しい。

車を買った。すごくやすいやつ。20万円 - MidoriMemo

マジで車欲しいと思ったらすぐかったほうがいい。普通は壊れんから。

で、買ってよかったものと言うよりは買ったものの紹介。

シュワラスター洗車シャンプー

シュアラスター 洗車シャンプー [ノーコンパウンド] カーシャンプー1000 SurLuster S-30

シュアラスター 洗車シャンプー [ノーコンパウンド] カーシャンプー1000 SurLuster S-30

間違いない。安いし、泡立ちいいし

ウォッシャー液

安いやつでいい。っかこれよりもっと安いやつでいい。安いやつは洗剤成分少なくてサラサラしてるからいいと思うわ。それ以外は洗車しなさい

ゼロウォーター

ガラスコーディングしてくれるらしいけど効果出てんのか出てないのかわからん。自分の車と同じ車種と同じ色を並べたら若干ツヤてかが違った気がする。多分気のせい。高い。

スポンジ

シュアラスター ウォッシングスポンジ [キズ防止 2層構造] SurLuster S-70

シュアラスター ウォッシングスポンジ [キズ防止 2層構造] SurLuster S-70

デカイし使いやすい。

鉄粉取り粘土

シュアラスター ネンドクリーナーソフト [鉄粉除去 ザラツキ除去 ノーコンパウンド] SurLuster S-83

シュアラスター ネンドクリーナーソフト [鉄粉除去 ザラツキ除去 ノーコンパウンド] SurLuster S-83

僕の愛車はコンパンドで磨きかかってたからあんま効果ない。一年に一回出来ればいいね。

スマートミスト

ゼロウォーター高すぎてこっちにしたけど、ヌルテカって感じ。スプレータイプでこれはすごいわコスパいいし。

樹脂系パーツ復活剤

カーメイト 脱脂剤 コーティング剤 黒樹脂復活 10ml C24

カーメイト 脱脂剤 コーティング剤 黒樹脂復活 10ml C24

舐めてたわ。すごい。どうしても中古車は樹脂系パーツが劣化してるのでこれやると下手したら新車に見えるかも。

静音計画(風切り音防止するやつ)

エーモン 静音計画 風切り音防止テープ ドア2枚分 約4.3m 2650

エーモン 静音計画 風切り音防止テープ ドア2枚分 約4.3m 2650

効果わからん。まぁ、若干効果あったんじゃん?

静音計画(風切り音防止するやつ)

エーモン 静音計画 風切り音防止モール ドア用 ドア2枚分(約2.1m) 2652

エーモン 静音計画 風切り音防止モール ドア用 ドア2枚分(約2.1m) 2652

無意味。ドアの隙間が黒くてかっこいい以外無意味。

車載ホルダー

運転しながらポケモンg、、最新ナビ見れるしね!

エアコンフィルター

中古車買ったら必ず交換した方がいいね。臭いし

アームレスト

これじゃないけど、コンパクトカーは基本ないから絶対必要。疲れがダンチ。これが一番成功。

auxケーブル

bluetoothは高いんでauxで満足。これのおかげでロードノイズ気にならんくなってきた。二番目に成功。

マフラーカッター

変わる。変わる。マジ変わる。

【selenium】seleniumを導入する上で重要なこと


心得。

今更感がするが、運用して学んだことがあるので書いてく。参考になれば。

selenium導入しよっかなーよくわからねぇけど」って人向け

くっそシンプルなパターンを作る

必要最低限のパターンを作る。いろんなパターンを考えない。絶対カオスになるので正常パターンだけ実装する。

分割してモジュールを作成

タイミングとかで成功率が変わるので一回で全部をやろうとしない。描画待てるよ!とかいろいろ意見があると思うが、何も知らない人に開発させる前提で考えてほしい。あとサイトの癖もあるからねー

ecサイトだったら

  • 商品選択→カートに入れる
  • カートから注文

みたいな感じで分割する。

seleniumのことを好きにならない

始めは結構面白いのよselenium。なんでも出来るって言ってもおかしくないぐらい機能が豊富。作っていくと、いろんなパターンを考えがちでカオス化するのは目に見えてるので「コーディングがめんどくせーから手っ取り早く終わらせよう」ぐらいの気持ちが大事。

スリープは入れるな!

seleniumのwaitなら許す。普通のスリープ入れるな!

elementとelementsどっちかに統一しよう

メソッド名が似てるからねー。可読性悪い気がする。

例外パターンもシレッと回避しろ!

特定のパターンは無理にif分回避するのでなく、要素がかなかったら処理しないとかに統一しよう。

// aタグが存在する場合のみクリックする
var tags = webDriver.FindElements(By.TagName("a"))
if(tags.Count() != 0)
{
    // クリック
}

c#ですみません。結構ここが決めてかなぁ?

サイトが変わって保守が大変になったら全部捨てろ!

強引すぎて申し訳ないが、これクソ大事。まぁこれを避けるために分割すればいいんだけど。プログラムもそうだよね。

テストエンジニアとかいれば話は別だけど、普通のエンジニアが開発しつつテストコード書いてくって感じで運用するならこの程度でいいと思う。っかこうやればよかったと後悔。

買ってよかったモノを紹介

リアルフォース

東プレ NG01B0 REALFORCE91UBK

東プレ NG01B0 REALFORCE91UBK

気分が良い。かっこいい。本当はhhkbがよかった。

カルティエの財布

これじゃないけど。良いもの持ってるって思えるから小物の物欲クソ無くなる。ホント財布とかくだらん買い物だな、原チャ買えんぞ

ダイニングテーブル

これじゃないけどダイニングテーブルはあるともうセンターテーブルとかでは飯食えなくなる最高。ちなみにNOCEってブランド

名刺入れ

カルティエ高すぎてね。。カード入れとして使ってるけど名刺入れの代用出来て最高。名刺入れ単体とかいらね。

テレビ

マジで安いやつでいい。壊れないし、機能いらんし。

ケトル偽物

ドリテック 電気ケトル ラミン ホワイト PO-323WT

ドリテック 電気ケトル ラミン ホワイト PO-323WT

コスパヤバい。汚れたら捨てればいいやぐらいの感覚だったんだけど3年目。

ウォークマン

クソ使いにくいし最低なんだけど、SDいいね。

iMac mini

APPLE Mac mini (2.6GHz Dual Core i5/8GB/1TB/Intel Iris) MGEN2J/A

APPLE Mac mini (2.6GHz Dual Core i5/8GB/1TB/Intel Iris) MGEN2J/A

安いし、Windows買うならMac買った方がいい。ヤフオクでゴリ安のプロダクトキー買ってbootcanpでおっけい。

ノートパッド

1.5万ぐらいで買った。全然良くないけど、おもちゃと思えば結構遊べる。

セミダブルベット

シングル買うなら捨てるつもりで買いなさい。ちょっと大きいから一人暮らしはしんどいかもだけど寝具はデカイに越したことがない。意外に女の人の方が狭さでストレス溜まるのかもしれない。

ソファ

2人掛けソファ 幅115 ブラウン EJ-2107

2人掛けソファ 幅115 ブラウン EJ-2107

ニトリのやつ買った。本当は2人がけ良くないんだけど一人暮らしの時はおけないししょうがない。ソファベットになるやつだと友達来た時楽。

レターオープナー

これやばい。買わない意味がわからない。ストレスと綺麗さが全然変わる

ゴミ箱

アスベル Rジョイント分別ダストボックス3個セット (33L・33L・27L)

アスベル Rジョイント分別ダストボックス3個セット (33L・33L・27L)

いらないって人多いと思うけど、ゴミはなるべく綺麗にしまっておいた方がよい。気分がいい。オシャレなの買ってもいいと思うけど高さとか統一感があるもので揃えた方が絶対いい。

スポンジ

タダで貰えるものはダメ。結構固めの方がいい。

カビキラー

カビキラー カビ取り剤 特大サイズ 本体 1,000g

カビキラー カビ取り剤 特大サイズ 本体 1,000g

毎週排水溝にぶっかけるだけど風呂とか台所クソ綺麗。
不潔感がないのは超重要。ピンク色の風呂場の人必見。

アイスノン

アイスノンソフト

アイスノンソフト

あると酔い過ぎたときとか熱とか暑いときとか最高。

電動ドリル

クソ安いやつでいいから必ず必要。IKEAとかで家具買ってこれないと死にます。DIYと辛さそこまで変わらんです。六角ドライバはほしいところ

高級イヤホン

15000ぐらいだけどかなり最高。もう他無理だわ。

それが僕には楽しかったから

それがぼくには楽しかったから 全世界を巻き込んだリナックス革命の真実 (小プロ・ブックス)

それがぼくには楽しかったから 全世界を巻き込んだリナックス革命の真実 (小プロ・ブックス)

お金や地位じゃなく本当に必要なものは世界中の人が使えるようにするべきだって考えはぐうの音も出ないぐらい素晴らしいことだと思う。まっこの人お金も地位も持ってるんだけどね!

ワイヤレススピーカー

Creative D100 ワイヤレス スピーカー ブラック Bluetooth SP-D100

Creative D100 ワイヤレス スピーカー ブラック Bluetooth SP-D100

コスパヤバい。デザイン値段音質すごい。もう7年目。

【angular4+.NET Core】一瞬でSPAを作る

技術ネタ。

わかりにくいから他のサイト推奨。リンクは載っける。

angularの環境作るのだるくない?c#とどう連携すんの?って調べてたら一瞬でSPAテンプレート出来たのでメモ。

SPAプロジェクトの作成

SPA関連のテンプレート(.NET Core)をダウンロード

dotnet new --install Microsoft.AspNetCore. SpaTemplates::*

まじで.NETCore優秀杉

作成するプロジェクトのディレクトリに移動

cd {対象のディレクトリ}

angularプロジェクトを作成

dotnet new angular

.NETCoreきも

npmのパッケージをダウンロード

npm install

プロジェクトのビルド

webpack

webpackでビルドが通らない( webpackのconfigファイルがない場合)

webpack --config webpack.config.vendor.js

ここからvisual studioで取得してくれるので、不要

Nugetパッケージを取得

dotnet restore

これだけ。.NETすごくね?

【参考】
ASP.NET CoreでAngularをする下準備
http://blog.okazuki.jp/entry/ 2017/03/05/091710
.NET Core command-line interface (CLI) tools
https://docs.microsoft.com/en- us/dotnet/core/tools/dotnet- restore
Windows環境でangular-cliを使えるようにする
http://qiita.com/elphe/items/ 8e73d4118b26a6971c3b
http://beachside.hatenablog. com/entry/2017/02/25/150306