7月に気になったWebサービス・アプリまとめ(2018)
お分かりかと思いますがGoodpatchさんやつリスペクトです😎 goodpatch.com
ためしがき
日本語のフリーフォントをまとめて試せる神サイト🖋
メディアにもたくさん取り上げられていました👀
日本語のフリーフォントをまとめて試せる神サイト「ためしがき」爆誕 フォント遊びが捗りそう - ねとらぼ
日本語のフリーフォントを試せる「ためしがき」登場 見栄えを一覧で比較 - ITmedia NEWS
数十種類の無料日本語フォントをブラウザ上で一度に試せて便利な「ためしがき」を使ってみた - GIGAZINE
AIメーカー
人工知能（AI）を誰でも簡単に作ることができるWebサービス🤖
開発者のQiitaも勉強になります📛
今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を作ってみた
メディア掲載もいっぱい👀
「AIメーカー」登場 画像認識AI、誰でも簡単に作れる 「ポケモン判定」「バイクメーカー判定」など続々（ITmedia NEWS） - Yahoo!ニュース
簡単にAIが作成できる「AIメーカー」で画像判別AIを作成してみた - GIGAZINE
「AIメーカー」登場 画像認識AI、誰でも簡単に作れる 「ポケモン判定」「バイクメーカー判定」など続々 - ITmedia NEWS
ウェブ表彰
Web上で表彰状を作り、SNSなどで簡単に送れるサービス🏆
開発者のnoteがめっちゃエモいです🦀
ウェブサービスで世界を変えることなんて出来ないと思っていた｜ampersand_xyz｜note
メディア掲載にもエモが目立ちます💡
想定以上の反響！誰かを気軽に褒め称えられる「ウェブ表彰」で世界はちょっと優しくなる？（FNN PRIME） - Yahoo!ニュース
気軽に誰かをたたえよう「ウェブ表彰」、想定以上の反響 6000枚以上の表彰状が贈られる - ITmedia NEWS
気軽にあらゆるものを讃える表彰状が作成できる「ウェブ表彰」 - GIGAZINE
motton
プロフィールをたくさん書くためのサービス
前略プロフ（使ったこと無いけど）懐かしいですね😇
最近になって１０年前くらいに流行ったサービスのリバイバルが増えてきてるのでアイディア探すには過去の流行り調査しほうが良いかもですね👀
54字の物語
9×6の54文字で超短編小説を書くサービス
色んな人が作る作品が秀逸
9×6の54文字の超短編小説「54字の物語」の投稿がTwitterで盛り上がる どれもすごい！ - ねとらぼ
平成生まれで繋がるSNSアイコン作成ジェネレーター
（これが名前で合ってる？🤔）
アイコンに生まれた年を入れられるサービス
平成最後の夏っていうのがエモい
平成生まれしか使えないので使えてないのが悲しい😭
やるぞ宣言
やりたいことを宣言してSNSにシェアしたり人から褒めてもらえたりするサービス📛
褒めるという設計が好きです❤️
LoveChain（ラブ・チェーン）
ラブ・チェーンはブロックチェーン上に2人だけのメッセージを永遠に残すサービスです。
ぜんっぜんわからないけどなんか面白いということだけは分かります😇
HTML名刺
Web上の名刺をツイッター連携で簡単に作れるサービス
こういうシンプルなのいいですよね👀
GA-YA-CHA（ガヤチャ）
Twitterで電話ができる無料通話アプリ
（通話できる友達がいなくて試せてない😇
自薦・他薦枠
Lancepod
CSSについての社内勉強会を行いました
6月25日に社内でマークアップの勉強会を開催しました🎉
CSSと仲良くなろう from akinobu yumoto
www.slideshare.net
内容としては
- BEMの基礎
- CSSを組む際に気をつけたい点
+アルファでデザイン意図を汲んだマークアップ
デザイン意図を汲んだマークアップに関してはスライド用意しておらずその場でサンプル出して話してました。
内容的には
「このテキストは伸びた場合はどうなる？左側が基準？中央そろえ？」
「このボタンは高さが大事？それとも余白？」
みたいな話をデザインを見ながら1つ1つ解説していきました。
このあたりちゃんとした資料にして再度勉強会を行いたい…
できれば社外の方にも来ていただいて知見共有できればと思ってるので参加したい方はお声がけくださいー🙏
スクロールに応じてヘッダーが順次固定されているJsを組んだ
iTunesか何かのようなスクロールにお応じてヘッダーが切り替わる挙動を組みました。
（言葉で説明するのが難しい…↓を見てくださいな）
仕様変更によりお蔵入りになったのでブログで供養します。
See the Pen MultiFixedHeader by あっきー💪😎💪 (@kuronekopunk) on CodePen.
Rails selectタグにクラスを付ける
f.select :foo, { a: 1, b: 2 }, class: 'bar' => <select name="model[foo]"> # あれ？classが居ない
時々ど忘れしてドキュメントを読みに行くやつ。
この様に定義されています。
def select(method, choices = nil, options = {}, html_options = {}, &block)
ref: rails/form_options_helper.rb at 71c7fd101324046995d8f7e51e78475c0e37ec1a · rails/rails · GitHub
optionsとhtml_optionsが違う👀
というわけで分けて書いてあげましょう
f.select :foo, { a: 1, b: 2 }, {}, class: 'bar' => <select name="model[foo]" class="bar">
ﾔｯﾀﾈ🎉
JavaScriptでURLクエリを取得する
クエリ文字列の取得は
window.location.search => "?foo=1&bar=2"
クエリ文字列をオブジェクトに整形する関数を用意。
function getUrlQueries() { var queryStr = window.location.search.slice(1); // 文頭?を除外 queries = {}; // クエリがない場合は空のオブジェクトを返す if (!queryStr) { return queries; } // クエリ文字列を & で分割して処理 queryStr.split('&').forEach(function(queryStr) { // = で分割してkey,valueをオブジェクトに格納 var queryArr = queryStr.split('='); queries[queryArr[0]] = queryArr[1]; }); return queries; }
これでめでたくクエリのオブジェクトの取得に成功しました🎉
