OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

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 - Web API | MDN より

Canvas API は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。
Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

Canvasを使えば、javascriptのAPI経由で文字や図形の描画、画像データとしての出力が可能なので、今回の要件にぴったりでした。処理はクライアントで完結しますし。

うまく使えば、ゲームなども作れます。また、canvasAPIをラッピングして扱いやすくしてくれるライブラリもあったりするので、よかったら調べてみてください。

リポジトリ

最小構成です。シンプルでいいですね。

github.com

ざっくりソース解説

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

beforeの画像

after

afterの画像

まあなんと言うことでしょう。こんなにも見た目がスッキリして、UIが直感的になったではありませんか。

茶番は置いておいて、改めてデザインの大事さを感じました!

まとめ

ここまで読んでくれてありがとうございました!

是非使ってください!気に入ったら拡散もしていただけると嬉しいです!

「OthloHack2019」レポート

11月1日(金)から11月3日(日)の3日間開催した、OthloHack2019のレポートです! 今回で4回目となるOthloHack。今年は、ワンダープラネット株式会社さまから本社オフィスを貸していただきました。

今回は定員40名での募集でしたが多くの応募があったため定員を増やし、53名の方に参加していただきました。 f:id:haseaki0503:20191105204438j:plain

今年のテーマは「〇〇を身近にする」。このテーマに沿ったプロダクトやサービスを3日間で開発していきます。 f:id:haseaki0503:20191105204455j:plain

1日目

初日は、アクアリング株式会社の茂森さんのファシリテーションでアイデア出し。デザイン・ドリブン・イノベーションという手法を使って、個人で感じている課題を出していきました。 f:id:haseaki0503:20191106234707j:plain

多い人は30個以上も課題が出たみたいです。多いですね...!

出た課題から、それぞれのチームで最も解決したい想いが強いものをひとつ選び、2日目のゴール宣言に向けてアイデアをブラッシュアップしていきます。 f:id:haseaki0503:20191106234855j:plain

2日目

2日目の昼のゴール宣言では、各チームがフォーマットに沿って1分間でアイデアの説明をしました。 ここまででブラッシュアップしたアイデアをもとに、いよいよ開発を始めていきます!

開発やデザインで詰まったチームは、現役のデザイナー・エンジニアのメンターのサポートを受けながら開発を進めていきます。 f:id:haseaki0503:20191108160942j:plain

2日目夕方には、ブレイクタイム。全参加者が一度手を止めて休憩をします。 シュークリームを片手に各チームで進捗状況を比べあっていて、「やばいー!」という声も聞こえてきました。 f:id:haseaki0503:20191108160841j:plain

3日目

3日目はいよいよ最終発表。最終発表に向けた資料準備と、デモの準備をしていきます。 昼には中間発表をし、そこで指摘された問題点を修正して最終発表に臨みます! f:id:shuzo_create:20191110012212j:plain

最終発表

タピオカmd

地域活性化を身近にする! 路上ライブを盛り上げることで地域を活性化! スマホがペンライトの代わりになり投げ銭も投げれちゃう! 盛り上がること間違いなし! f:id:shuzo_create:20191107225345j:plain

言語大洪水卍

初学者が小さなわからないをすぐに解決できるサービスになります。 サイトを移動しなくてもわかる!ことがポイント! なるべく挫折をせずに学習していけそうです👩‍💻 f:id:shuzo_create:20191107221326j:plain f:id:shuzo_create:20191108102959j:plain

コーラ‼︎

「きれいな部屋」を身近にするというテーマで、家に帰ったらすぐに片付けるという習慣を付けるために「miniMom」というIoT家具・アプリを作成しました! 家に帰ってから時間内に片付けをしないと音が鳴ってMomが怒ってくれます😖f:id:shuzo_create:20191107225717j:plain f:id:shuzo_create:20191107225729j:plain

j.s.bach

作曲を身近に!♪ 楽器を引けるけど曲がかけない…楽曲のハードルが高い…とその悩みを解決してくれる! 音楽理論をゲームに!ピースをはめるだけで曲が完成しちゃう! f:id:shuzo_create:20191107230020j:plain f:id:shuzo_create:20191107230028j:plain

Elderly

「頑張っている人」を身近にするというテーマで、家に居ながら全世界の人の勉強状況がわかり、作業のモチベーションを上げることが出来る「motivasce」というサービスです! f:id:shuzo_create:20191108022747j:plain f:id:shuzo_create:20191108022758j:plain

MiK

バイトの働きやすさを身近にするサービスです! アルバイトで生まれてくる不満をアンケート形式で伝える事ができます。 店長に日頃言えない悩みを匿名で! f:id:shuzo_create:20191108103720j:plain f:id:shuzo_create:20191108103736j:plain

エイチーム

「嘘」を近づけるというテーマで、 交流会等でいろんな人と話したい!けど、1人の長話で抜け出すことが出来ない… そんな時に偽の着信がかかってきて話したい人と話すことが出来るアプリです! f:id:shuzo_create:20191107233606j:plain f:id:shuzo_create:20191107233609j:plain

hitori de manabu

「わかる」を身近に! 初学者が効率よく学べる! 電子書籍に他の人が書き込んだ内容を見れるのでどんどんアップデートされる! 専門用語をメモを見ればすぐわかるのがとても便利です! f:id:shuzo_create:20191107233946j:plain f:id:shuzo_create:20191107233937j:plain

ETEAM

割り勘の楽しさを身近にするサービス「EKANJI」では、飲み会での余剰金額で飲み会後でも楽しむ事ができるアプリになっています🍺 f:id:shuzo_create:20191107234255j:plain f:id:shuzo_create:20191107234300j:plain

FINEBOYS

外見の服装をどうにかしたい! 自分の格好と類似した他人の格好を比較する!類似のファッションを比べることで新しい物を取り入れられる! 客観的に自分のファッションを見れるので安心して出かけられます😳 f:id:shuzo_create:20191107234608j:plain f:id:shuzo_create:20191107234626j:plain

webK

「価値ある情報」を身近にするため、全てのwebページの信頼性を評価出来るWEB ASSESSMENTORというサービス! 各ページの信頼性を確認することも出来ます🙆‍♀️ そして、Chrome拡張機能として現在申請中だそうです…! f:id:shuzo_create:20191107235129j:plain f:id:shuzo_create:20191107235211j:plain

審査の結果...最優秀賞は「ETEAM」でした!

f:id:haseaki0503:20191107001623j:plain

エイチーム賞「hitori de manabu」

f:id:haseaki0503:20191107001013j:plain

PROTOベストエモーショナル賞「タピオカ.md」

f:id:haseaki0503:20191107001205j:plain

クックパッド賞「コーラ!!」

f:id:haseaki0503:20191107001340j:plain

リブセンス賞「言語大洪水卍」

f:id:haseaki0503:20191107001423j:plain

TechTrain賞「MiK」

f:id:haseaki0503:20191107001508j:plain

ワンダープラネット賞「j.s.bach」

f:id:haseaki0503:20191107001528j:plain

おわりに

OthloHackについて話を聞いてみたい!というかたは、アフターパーティを開催予定ですのでぜひご参加ください https://othlotech.connpass.com/

f:id:haseaki0503:20191106235337j:plain

CakePHPでTDDしてみる

どうも、最近、お布団から全然出れないよしかわです。

今回は CakePHP でテスト駆動開発(以下 TDD と称する)をした体験談をまとめていきます。

TDD をすると、どんなメリット、デメリットがあるかに言及していきます。

  • 対象読者
  • TDD とは
  • TDD の流れ
  • メリット
  • デメリット
  • インストールする
  • CakePHP でテストコードを自動生成
  • テストしてみる
  • 失敗から成功に
  • まとめ
  • 参考文献

対象読者

  • TDD を知らない人
  • CakePHP を業務で触っている人
  • 研究で TDD を取り入れたい人
続きを読む

無料の日本語Webフォントを使おう

"無料の日本語Webフォントを使おう"
こんにちは!あすかです!

先月末くらいからGoogleFontsが正式に日本語フォントをサポートし始めましたね!

ということで今回は、Web制作で使える日本語の無料Webフォントの利点やサービスを紹介したいと思います。

記事の内容

  • Webフォントを使う利点
  • 日本語Webフォントを使用する際に便利なサービス

対象読者

  • Webのフロント側を作る人
  • Webのデザインを提案する機会がある人
  • フォントが好きな人
続きを読む

Amazon Auroraがなぜ高速か解説する

f:id:Juju_62q:20181015221046p:plain

おはこんばんちは!@ジュジュです!
結構長いこと書かなかったなぁということでお久しぶりです。今回はいつもよりも少しテクニカルな記事を書きたいなと思います!

僕はインフラエンジニアを目指しているのでクラウドネイティブやパブリッククラウド系の勉強をすることが多いのですが、パブリッククラウドの謎技術ってたくさんありますよね。GCPのLive Migrationであったりとか、AzureのDurable Funtionsであったりとか。何回説明を読んでも「で、これはなにがどうなってんの?」みたいな気持ちになるわけです。今回は個人的にはAWSの謎技術である「Amazon Aurora」について調べてみたのでまとめたいと思います。

なお、主なデータソースはAmazon Aurora: Design Considerations for High Throughput Cloud-Native Relational Databases で、理解しにくかった部分については書籍や公式ドキュメント等で補完しています。個人的な意見や解釈が間違っている部分がある可能性がありますので予めご了承ください。

続きを読む

web制作者が意識すべきSEO対策のキホン

f:id:yuverna:20180910023615p:plain お久しぶりです、ちーずです。
皆さんは十分な睡眠はとれていますか?
最近私は睡眠の大切さを実感しながら生きています。
レッドブルやモンスターなどの魔剤は控えて、健康な日常をおくりましょう。

今回は、web制作に関わる全ての人が知っていて欲しい「SEO対策」に関してのお話です!

  • SEOとは?
  • 1. 検索されたいワードを検討しよう!
    • Google トレンドで検索ボリュームを調べよう!
    • Keyword Toolでサジェストワードを調べよう!
  • 2. webサイトのHTMLを最適化しよう!
    • 最重要!titleとmeta description
    • 同じくらい大切!見出しタグ
    • 意外と重要?! strongタグ
    • Googleが推奨!構造化データマークアップ
  • 3. ページの読み込みスピードを改善しよう!
    • PageSpeed Insightsで確認しよう!
  • webサイトは改善し続けよう!
続きを読む

オープンソースライセンスについてまとめてみた

f:id:yoshikawataiki:20180911173641j:plain どうも、よしかわです。

最近、OSS を作成しようと思い立ちました。

何を商用利用して良いか詳しく知らなかったので、この記事を作成しようと思いました。

対象読者

  • OSS を作成したいと思う人
  • ライセンスごとの特徴を知りたい人

オープンソースの定義

OSS を規定する上で重要となる「オープンソースの定義」を知ることが大事です。

オープンソースソフトウェアライセンスは、ソフトウェアを再配布することを前提として作成されたライセンスです。

Open Source Initiativeが承認した OSS ライセンスだけでも、70 種類以上が挙げられています。

続きを読む