zoomの背景で自己紹介できるようにジェネレーター作った
どうも! kazz です!
今回は、OthloTech運営メンバーで制作した「Zoom名札ジェネレーター」の紹介と、作った経緯、アプリの仕組みについてお話しさせていただきたいと思います!
Zoom名札ジェネレーター
バーチャル背景用の画像に簡単にテキストを合成できるジェネレーターを作りました。16:9の画像または背景色を選んで、あとは文字を打ち込むだけでいい感じに背景画像を生成してくれます。
Zoom名札ジェネレーター
zoom-bg-namecard.s3-website-ap-northeast-1.amazonaws.com
作った経緯
先日、zoomを使って行われた「Zli x OthloTech LT会」に向けて、イベント1週間前に発案されました。(なんとか間に合った)
オフラインイベントの際は、懇親会で話のタネになればと思い、名札を配り記入し使ってもらっていましたが、オンラインでのイベントにおいてはそれができません。
ただでさえオンラインでは視覚的な情報が削られるため、初めて会話する人達が多くいるオンライン懇親会においてはどうにかしたい問題でした。
このアプリを通じて、今後のオンライン懇親会でのコミュニケーションが少しでも円滑になればいいなと思います。
アプリの仕組み
Canvasを用いたWebアプリケーションです。通信は発生しず、クライアントサイドで動作が完結します。
CanvasAPIという適役
HTML5のCanvasAPIはご存知ですか?
Canvas API は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。
Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。
Canvasを使えば、javascriptのAPI経由で文字や図形の描画、画像データとしての出力が可能なので、今回の要件にぴったりでした。処理はクライアントで完結しますし。
うまく使えば、ゲームなども作れます。また、canvasAPIをラッピングして扱いやすくしてくれるライブラリもあったりするので、よかったら調べてみてください。
リポジトリ
最小構成です。シンプルでいいですね。
ざっくりソース解説
htmlにcanvasタグを設置します。後々、このエリアに色々描画されていきます。
index.html
<canvas id="preview" class="preview" width="1920px" height="1080px"> ブラウザを変えてお試しください。 </canvas>
jsでcanvasのelementを抽出します。また、elementから2Dのcontextを生成します。このcontextに描画したりするAPIが詰まってます。
main.js
const preview = document.getElementById("preview"); const previewContext = preview.getContext("2d");
描画時の関数を定義します。例えば、テキストエリアの入力イベントが呼ばれるたびに実行させたりします。
main.js
function drawPreview() { // 全体クリア(引数:xの始点, yの始点, xの幅, yの幅) previewContext.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // 以下に描画していく // ... } // テキストエリアのinputイベント時に描画しなおす。 textarea.addEventListener("input", () => { drawPreview(); });
最後、canvasに描画されたイメージを画像ソースに変換し、リンクとしてoutputに出力します。形式はBASE64で吐き出されるので、そのままhrefに乗っけるとリンクを開いた際にダウンロードされます。
main.js
generateButton.addEventListener("click", () => { const imgData = preview.toDataURL(); outputArea.innerHTML = ` <a href="${imgData}" download="file.png">🙋♀️ ダウンロードする</a> `; });
デザインについて
デザインは、運営メンバーのあすかさんが担当してくれました!まさに劇的ビフォーアフター!
before
after
まあなんと言うことでしょう。こんなにも見た目がスッキリして、UIが直感的になったではありませんか。
茶番は置いておいて、改めてデザインの大事さを感じました!
まとめ
ここまで読んでくれてありがとうございました!
是非使ってください!気に入ったら拡散もしていただけると嬉しいです!
「OthloHack2019」レポート
11月1日(金)から11月3日(日)の3日間開催した、OthloHack2019のレポートです! 今回で4回目となるOthloHack。今年は、ワンダープラネット株式会社さまから本社オフィスを貸していただきました。
今回は定員40名での募集でしたが多くの応募があったため定員を増やし、53名の方に参加していただきました。
今年のテーマは「〇〇を身近にする」。このテーマに沿ったプロダクトやサービスを3日間で開発していきます。
1日目
初日は、アクアリング株式会社の茂森さんのファシリテーションでアイデア出し。デザイン・ドリブン・イノベーションという手法を使って、個人で感じている課題を出していきました。
多い人は30個以上も課題が出たみたいです。多いですね...!
出た課題から、それぞれのチームで最も解決したい想いが強いものをひとつ選び、2日目のゴール宣言に向けてアイデアをブラッシュアップしていきます。
2日目
2日目の昼のゴール宣言では、各チームがフォーマットに沿って1分間でアイデアの説明をしました。 ここまででブラッシュアップしたアイデアをもとに、いよいよ開発を始めていきます!
開発やデザインで詰まったチームは、現役のデザイナー・エンジニアのメンターのサポートを受けながら開発を進めていきます。
2日目夕方には、ブレイクタイム。全参加者が一度手を止めて休憩をします。 シュークリームを片手に各チームで進捗状況を比べあっていて、「やばいー!」という声も聞こえてきました。
3日目
3日目はいよいよ最終発表。最終発表に向けた資料準備と、デモの準備をしていきます。 昼には中間発表をし、そこで指摘された問題点を修正して最終発表に臨みます!
最終発表
タピオカmd
地域活性化を身近にする! 路上ライブを盛り上げることで地域を活性化! スマホがペンライトの代わりになり投げ銭も投げれちゃう! 盛り上がること間違いなし!
実際のライブデモ✨
— OthloTech (@OthloTech) November 3, 2019
一体感が生まれしかも色も自由に変えれる!#OthloHack #OthloHack2019 pic.twitter.com/BGnTs8nY74
言語大洪水卍
初学者が小さなわからないをすぐに解決できるサービスになります。 サイトを移動しなくてもわかる!ことがポイント! なるべく挫折をせずに学習していけそうです👩💻
コーラ‼︎
「きれいな部屋」を身近にするというテーマで、家に帰ったらすぐに片付けるという習慣を付けるために「miniMom」というIoT家具・アプリを作成しました! 家に帰ってから時間内に片付けをしないと音が鳴ってMomが怒ってくれます😖
j.s.bach
作曲を身近に!♪ 楽器を引けるけど曲がかけない…楽曲のハードルが高い…とその悩みを解決してくれる! 音楽理論をゲームに!ピースをはめるだけで曲が完成しちゃう!
Elderly
「頑張っている人」を身近にするというテーマで、家に居ながら全世界の人の勉強状況がわかり、作業のモチベーションを上げることが出来る「motivasce」というサービスです!
MiK
バイトの働きやすさを身近にするサービスです! アルバイトで生まれてくる不満をアンケート形式で伝える事ができます。 店長に日頃言えない悩みを匿名で!
エイチーム
「嘘」を近づけるというテーマで、 交流会等でいろんな人と話したい!けど、1人の長話で抜け出すことが出来ない… そんな時に偽の着信がかかってきて話したい人と話すことが出来るアプリです!
hitori de manabu
「わかる」を身近に! 初学者が効率よく学べる! 電子書籍に他の人が書き込んだ内容を見れるのでどんどんアップデートされる! 専門用語をメモを見ればすぐわかるのがとても便利です!
ETEAM
割り勘の楽しさを身近にするサービス「EKANJI」では、飲み会での余剰金額で飲み会後でも楽しむ事ができるアプリになっています🍺
FINEBOYS
外見の服装をどうにかしたい! 自分の格好と類似した他人の格好を比較する!類似のファッションを比べることで新しい物を取り入れられる! 客観的に自分のファッションを見れるので安心して出かけられます😳
webK
「価値ある情報」を身近にするため、全てのwebページの信頼性を評価出来るWEB ASSESSMENTORというサービス! 各ページの信頼性を確認することも出来ます🙆♀️ そして、Chrome拡張機能として現在申請中だそうです…!
審査の結果...最優秀賞は「ETEAM」でした!
エイチーム賞「hitori de manabu」
PROTOベストエモーショナル賞「タピオカ.md」
クックパッド賞「コーラ!!」
リブセンス賞「言語大洪水卍」
TechTrain賞「MiK」
ワンダープラネット賞「j.s.bach」
おわりに
OthloHackについて話を聞いてみたい!というかたは、アフターパーティを開催予定ですのでぜひご参加ください https://othlotech.connpass.com/
CakePHPでTDDしてみる
どうも、最近、お布団から全然出れないよしかわです。
今回は CakePHP でテスト駆動開発(以下 TDD と称する)をした体験談をまとめていきます。
TDD をすると、どんなメリット、デメリットがあるかに言及していきます。
- 対象読者
- TDD とは
- TDD の流れ
- メリット
- デメリット
- インストールする
- CakePHP でテストコードを自動生成
- テストしてみる
- 失敗から成功に
- まとめ
- 参考文献
対象読者
- TDD を知らない人
- CakePHP を業務で触っている人
- 研究で TDD を取り入れたい人
Amazon Auroraがなぜ高速か解説する
おはこんばんちは!@ジュジュです!
結構長いこと書かなかったなぁということでお久しぶりです。今回はいつもよりも少しテクニカルな記事を書きたいなと思います!
僕はインフラエンジニアを目指しているのでクラウドネイティブやパブリッククラウド系の勉強をすることが多いのですが、パブリッククラウドの謎技術ってたくさんありますよね。GCPのLive Migrationであったりとか、AzureのDurable Funtionsであったりとか。何回説明を読んでも「で、これはなにがどうなってんの?」みたいな気持ちになるわけです。今回は個人的にはAWSの謎技術である「Amazon Aurora」について調べてみたのでまとめたいと思います。
なお、主なデータソースはAmazon Aurora: Design Considerations for High Throughput Cloud-Native Relational Databases で、理解しにくかった部分については書籍や公式ドキュメント等で補完しています。個人的な意見や解釈が間違っている部分がある可能性がありますので予めご了承ください。
続きを読むweb制作者が意識すべきSEO対策のキホン
お久しぶりです、ちーずです。
皆さんは十分な睡眠はとれていますか?
最近私は睡眠の大切さを実感しながら生きています。
レッドブルやモンスターなどの魔剤は控えて、健康な日常をおくりましょう。
今回は、web制作に関わる全ての人が知っていて欲しい「SEO対策」に関してのお話です!
- SEOとは?
- 1. 検索されたいワードを検討しよう!
- Google トレンドで検索ボリュームを調べよう!
- Keyword Toolでサジェストワードを調べよう!
- 2. webサイトのHTMLを最適化しよう!
- 最重要!titleとmeta description
- 同じくらい大切!見出しタグ
- 意外と重要?! strongタグ
- Googleが推奨!構造化データマークアップ
- 3. ページの読み込みスピードを改善しよう!
- PageSpeed Insightsで確認しよう!
- webサイトは改善し続けよう!
オープンソースライセンスについてまとめてみた
どうも、よしかわです。
最近、OSS を作成しようと思い立ちました。
何を商用利用して良いか詳しく知らなかったので、この記事を作成しようと思いました。
対象読者
- OSS を作成したいと思う人
- ライセンスごとの特徴を知りたい人
オープンソースの定義
OSS を規定する上で重要となる「オープンソースの定義」を知ることが大事です。
オープンソースソフトウェアライセンスは、ソフトウェアを再配布することを前提として作成されたライセンスです。
Open Source Initiativeが承認した OSS ライセンスだけでも、70 種類以上が挙げられています。
続きを読む