canvas タグで作成した画像をダウンロードさせるボタンを作る(透過あり/透過なしも選べる実装)

JavaScript 周りってホントにネタが尽きないなと思う今日このごろ

canvas タグで表示した図は、
画像ホバー => 右クリック => 画像を保存
で画像としてダウンロードすることができます。

これは jsfiddle の Chartjs の例です

result のグラフで実際に確認することができます

今回は、このグラフをボタンクリックでダウンロードできるようにしようというお話です。

コツが3つあって

・canvas にはtoDataURLというメソッドがあり、リソースを普通に吐き出しするとBASE64のデータイメージで返してくれる
・背景透過 => 背景ありにする方法
・擬似的にリンクをクリックしてファイルダウンロードする(JS側で何かダウンロードしてもらう時によく使う)

この辺りを踏まえてコードを読んでいただけるといいかもです

上の例にボタンと関数を追加していきます

    <button onClick="downloadImage()">
    透過PNG
    </button>
    
    <button onClick="downloadImage(false)">
    透過なしPNG
    </button>

const downloadImage = (transparent = true) => {
  const canvas = document.querySelector('#chartJSContainer');
  
  let targetCanvas = canvas; 
  if(!transparent) {
    // 透過なしの場合、ここで背景指定した別のcanvasを用意して上書きしてあげる!
    
    const dummyCanvas = document.createElement("canvas");
    dummyCanvas.width = canvas.width
    dummyCanvas.height = canvas.height

    const dummyCtx = dummyCanvas.getContext('2d');

    dummyCtx.fillStyle = "#FFFFFF";
    dummyCtx.fillRect(0, 0, canvas.width, canvas.height);

    dummyCtx.drawImage(canvas, 0, 0);
    targetCanvas = dummyCanvas
  }
  
  // dummy のaタグを用意して疑似クリック
  const dummyLink = document.createElement("a");
  dummyLink.type = 'application/octet-stream';
  dummyLink.download = `test.png`
  dummyLink.href = targetCanvas.toDataURL('image/png')
  dummyLink.click()
}

これらを埋め込んだ jsfiddle はこちら

面白いですね!

ではでは〜

明日からできる「ググる力」をアップさせるテクニック~ Google と仲良くなって仕事の効率をx倍しよう! ~

皆さんコンニチハ

大阪府松原市でウェブを中心としたソフトウェア開発を行っています。
コワーキングスペース松原ガレッジ管理人の五島です。

新年スタートしてはやひと月、
今日もお仕事に関係する有益な情報を共有できればいいなと思います

本日のテーマは「ググる力」です!
目次はこちら

プログラマに限らず、日々の生活や仕事で検索を使わない人はいないのではないでしょうか!?

「この単語ってどういう意味だろう」
「突然プリンタが動かなくなった、どうすればいいだろう」
「キュウリって犬に食べさせてもいいんだっけ」

などなど 専門家や近所の人に電話や直接聞いてもいいかもですが、多くの人は Google で検索をかけるのではと思います。

今回のググる力の話は質問の中でも「課題解決系」に当てはまるのではと考えてます。
上の3つの質問だったら、真ん中の質問のような形式です。

僕が観測している範囲だけで判断すると

・回答(もしくはヒント)を見つけるのが得意な人
・そうではない人(見当違いの記事に振り回される人)

の大きく2種類に分けられる気がします。
実は長い間この辺りの差って当人の「経験」とかかな〜と思ってたのですが、どうやらテクニックなのではないかと思いはじめました。
というのも、同じお題に対して、自分が行った検索行動といわゆる「検索できなかった人」の行動に明らかに差があったためです。
その行動の差からググる力というものをもっと具体的な力に分解して分析してみました。

ググる力の正体

「ググる力」というのは、言い換えると「検索して目的の情報にたどり着く力」です。
そこで私は3つの力でググる力が定義できるんじゃないかな〜と考えました。

ググる力 => ワード構成力 + 具体/抽象化力 + ゴールイメージ力

それぞれ説明すると

ワード構成力

これは現在の状況を説明するためにシンプルな単語の組み合わせを決めるための能力です。
例えば先程のプリンタの例だったら、「プリンタ 印刷 動かない」などです。
だいたいは自分の状況を説明してみて、名詞と動詞だけ抜き出せば最低限の構成になると思います。

具体/抽象化力

ワードの構成力で説明した「プリンタ 印刷 動かない」では目的の回答にたどり着くのは稀でしょう。
おそらく検索結果がめちゃくちゃ出てくるからです。
ここに例えば、具体的な要素を追加します。
機種名、プリンタの画面に出力されたエラーコード、PCの画面に出力されたメッセージなどです。
他にも「動かない」 => 紙は出力されるけど、文字が印刷されない など、症状を正確に記述するような力(足すという意味での具体化)です。
これは具体化の例ですが、検索結果の数などを見ながらワードを抽象的に変更していったり、削除する(引くという意味での抽象化)ようなケースもあります。

ゴールイメージ力

ここは検索する対象の知識や経験に依存すると思います。
過去に一度調べたことがある、とか、回答イメージができている(この部分の設定を確認すれば...こんな感じの画面が表示されるはず...)などです。 全く知識のない分野の場合は、次のステップや調査方法などがゴールになります。

ざっくり3つの力を説明してみました。

これらの力を検索の結果が得られるごとに調整することで、 目的の回答を探します。

ググるサイクルを回す

1回目の検索結果からピンポイントで回答を見つけるのはめちゃくちゃ難しいですし、期待するべきではありません。
先程のプリンタの例の説明でも記載したのですが、検索結果の様子を見ながら次のキーワードを新しく決めるを繰り返すことが大切です。

3つの力をうまく調整しながら検索のサイクルを回しましょう

私の場合、検索結果を見る場合は以下のように2軸で評価を行います。

・検索の上位3~5件のタイトル/概要がゴールイメージに近いか ・検索結果の件数が多いか、少ないか

多いとか少ないはかなり主観的ですw
図にするとこんなイメージです

ググった後の検索結果の評価

得られた検索結果がどの領域に該当するかで次の行動を決めます。
正直C, Dの領域に該当すれば回答が見つかったとしてやめてしまっていいと思います。

A => ワードを具体的にする
B => ワードが具体的過ぎる(抽象化する) or ゴールをもう少し手前のステップにする or やめて人に聞く
C => 理想的
D => もう少しワードを具体的にする or 足せばより理想に近づくかも

※ 結果が少ない場合はあくまで話題や情報そのものが少ないケースもあります。

回答を見つける速さについて

最初に選ぶワードでなるべくCの位置を狙えるようにワードの抽象度やイメージをうまく作れると見つける速さにつながります。
この辺りは経験によるのかな〜と思ったりします。
多分どのワードを固定してどのワードを変更するかというカンのような要素が絡むのかなと

ワードを選ぶ時の頭の中

ワードを具体化/抽象化する時には、自分と同じ悩みを持つ状況に陥る人がどれくらいいるかを想像します。 「パソコン 故障」で検索するととりあえず色々なものが引っかかってきます。
故障を修理する会社がリストに出てきたり、データを取り出す方法やらなんやらかんやら目的外のものが出てきそうです。
これだとAの領域に陥りそうです。

自分で治したい(修理方法とか) + パソコンは○社で△indows10 + 故障の内容を説明
など具体的にすることで件数を絞り込みます。

これで件数が少なくなってしまった場合、○社を抜いて△indows10だけで検索したり、故障の内容説明の具体的な部分を抜く

とりあえず、同じ悩みを抱えた人がどのような検索ワードでしらべるかな〜と思いながら選定します。

まとめ

ググる力を分解して3つの力(ワード構成力 + 具体/抽象化力 + ゴールイメージ力)と定義しました。
それを元に検索のサイクルと評価の方法について説明しました。
評価を元に次のアクションを決める方法を説明しました。
こちらの記事で伝えたかったのは以上です!!

がむしゃらに検索するのも大事かもしれません。(そこから触れられる情報もあります!)
少しだけこの記事で紹介したやり方を活用していただけると、もう少し早く検索から有用な知識が得られると思います。

この検索方法は Google だけではなく各種 SNS や YouTube などでも応用可能です。
ぜひ一度自分の検索行動を見直してみてください(｀･ω･´)ゞ

今年も松原ガレッジをよろしくおねがいいたします!
今後もこのような日々考えていることを共有していければと思いますので、ブログの読者になるボタンを押して頂けると嬉しいです!

Rubyの言語判定ライブラリは cld3-ruby を使うといいかも

здравствуйте

「何語やねん!」
そう思ったあなた、正解です
(ズドラーストヴィチェと読むそうです)

今日はロシア語の挨拶からお送りしております。
言語判定が必要そうな機会ができたので、色々調べてみました。

外部ネットワークを経由せずに高い精度で言語判定するなら cld3-ruby がよさげです。
Mastodon の中でも利用されているみたいですね

インストールする際には

C++ compiler
Protocol buffers

が必要になるので、

debian系だと(rubyのdockerイメージで確認)

libprotobuf-dev
protobuf-compiler

RedHat系だと(AmazonLinux2で確認)

protobuf-devel
protobuf-compiler

をインストールしてから gem をインストールしてみてください!

あとはreadmeの通り

require 'cld3'

cld3 = CLD3::NNetLanguageIdentifier.new(0, 1000)

cld3.find_language("こんにちは") # => #<struct Struct::Result language=:ja, probability=1.0, reliable?=true, proportion=1.0, byte_ranges=[]>

cld3.find_language("This is a pen.") # => #<struct Struct::Result language=:en, probability=0.9999408721923828, reliable?=true, proportion=1.0, byte_ranges=[]>

cld3.find_language("здравствуйте") # => #<struct Struct::Result language=:ru, probability=0.3140212297439575, reliable?=false, proportion=1.0, byte_ranges=[]>

最初のインスタンス生成する箇所で2つの数値を与えるんですけど、それぞれ
・最初の引数が(0の箇所)が与えられた文字列が、その引数のbyte数よりも小さい時nilを返す(最低限必要な閾値になるbyte数)
・2つめの引数(1000の箇所)が、最初にUTF8に変換可能なbyte列から最大のbyte数 です。

bype数基準なので日本語だと

text_utf8 = 'こんにちは'.encode(Encoding::UTF_8)
text_utf8.bytesize #=> 15

になるので、元のテキスト量にもよりますが気持ち多めの方が精度がいいかもしれません。
(この辺り最適な量がわかる人は教えて下さい!)

内部で利用されているコード は Chrome とかでも使われているとのこと、ありがとう Google さん
ありがとう gem の製作者さん

これで外部ネットワークを経由せずに言語判定ができますね

Sidekiq のキューの中身を一気にリセットする方法

意外と記事がなかった。

Sidekiq::Queue.new.clear だけだと、defaultという名前のキューの中身のジョブだけ削除される。
実際は色々な役割でQueueを使い分けている人が多いと思うので、対象のQueueが決まってる場合は名前を指定してclear

Sidekiq::Queue.new('your_queue').clear

名前も関係なく、一旦全部リセットしたい場合は以下を利用するとOK
(もちろん本番環境では安易に利用しないように!)

Sidekiq::Queue.all.each(&:clear)

【参加費無料】プログラミング学習の第一歩！CoderDojo松原を覗いてみよう

小中学生のお子さんをお持ちのお父さんお母さん！自分の子どもが学校のプログラミング学習に追いつけているのか、あるいはこれから付いていくことができるのか不安になったことはありませんか？
小中学校でプログラミング学習が必修となった今、パソコンやタブレットの操作の仕方を知っていて損はありません。

そこで今回は、松原ガレッジのスタッフがメンターとして参加しているプログラミング道場の「CoderDojo松原」について、学習内容やスケジュール、さらには季節ごとの催し事などを写真と一緒にご紹介していきたいと思います。

「まずはパソコンに慣れてほしい」
「自分はわからないから詳しい人にみてもらいたい」
「うちの子だけ学校の授業に追いつけないのでは...」

このような心配・不安を抱えている親御さんがいれば、まずはこの記事をご参照ください。

そもそもCoderDojoってなにをするところ？

CoderDojo とは、「子ども達のためのプログラミング道場」のことです。CoderDojo に参加する子ども達は「ニンジャ」と呼ばれ、17歳以下であれば誰でも参加することができます。

CoderDojo Japanの公式サイトによると、日本国内だけで200以上の道場が開催されています。

CoderDojo は7〜17歳の子どもを対象にしたプログラミング道場です。2011年にアイルランドで始まり、世界では112カ国・2,200の道場、日本では全国に237以上の道場があります。CoderDojo は全国各地で定期的に開催されており、毎週、同時並行的に道場が開かれています。

どの道場でもニンジャの「主体性」や「創造性」を大切にしながら、ニンジャ同士で学び合える環境づくりを心がけています。また、どうしてもわからない問題にぶつかってしまっても「メンター」と呼ばれる人に相談することで、一緒に調べたり試したりしながら、正解に近づくことができます。メンターでもすべての質問に答えられるとは限りませんが、わからないことをニンジャと一緒に試行錯誤することによって、お互いが知識を習得するができるのです。

まずは、お住まいの地域やその周辺でCoderDojoが開催されていないか、公式サイトやイベントサイトから探してみましょう。

※CoderDojo松原 への参加申込はこちら

CoderDojo松原 の活動内容

CoderDojo松原 は月に1度、第3土曜日にまつばらテラスにて開催されています。（※会場の予約状況によっては開催日が変わります）

参加しているニンジャ達の年齢層は、大体8歳〜12歳がほとんど。
CoderDojo松原 に通うまでは「パソコンに触ったことがない！」というレベルだったにも関わらず、今では「ミニゲームに使いたい画像をインターネットで検索する」「教科書にある題材をアレンジした自分なりのミニゲームを作る」など、自分の思い通りに操作することができるようになった子もいます。

CoderDojo松原 では、基本的に無料のプログラミング学習ソフト「Scratch」を使用して作品を制作していきます。作品といっても、簡単なミニゲームだったり、キャラクターがいろんな動作を繰り返すものだったりと、子どもたちによって制作するものは様々です。2時間〜3時間という決められた作業時間の中で、ひとつの作品を仕上げていきます。

『Scratch』とは？Scratchを活用したプログラミング学習法に関する記事はこちら

さらに、作品が完成した子どもは、パソコンやタブレットをプロジェクターにつないで、参加者全員に発表する機会も設けています。人前で発表することで、自分の考えを言語化する練習にもなるからです。加えて、他のプログラムの仕方がないか意見交換をしたり、新たな課題が見つかったりして、ニンジャ同士で成長する機会にもなるのです。

「Scratch」以外にも、作業時間中にマインクラフトをする子やタイピング練習をする子もいます。また、参加人数によっては現役エンジニアによるプログラミング講座・YouTube講座などが開催されたりすることもあります。

CoderDojo松原で行われる季節のイベント

CoderDojo松原 では季節に合わせたイベントを開催しています。

クリスマスイベント

12月に行われるクリスマスイベント。ビンゴ大会やクイズ大会などの余興もあり、景品も用意しています。

ハロウィンイベント

10月に行っているハロウィンイベント。子どもたちは好きなキャラクターの被り物やコスプレを持参します。

バレンタインイベント

2月は、管理人や保護者の皆様がチョコレートやクッキーを差し入れしてくれます。お菓子を目の前にしたニンジャ達は、普段以上？に集中して作業に取り組んでいます。

「CoderDojo松原」でプログラミング学習をはじめてみませんか？

プログラミングをはじめ、パソコンの基本的な使い方やタイピング練習など、自宅では教えられないことも学べる「CoderDojo」。

CoderDojo松原 は、いつでも新たなニンジャをお待ちしています。見学だけのお申込みも大歓迎！
参加をご希望される方は、下記のイベントページをご参照ください。

なお、参加人数には限りがあるため、早めのお申し込みをおすすめします。

CoderDojo松原 への参加申込はこちら

※写真の一部は新型コロナウィルスが蔓延する以前に撮影したものです。現在は、マスクの着用をはじめ、入場前の手指の消毒や共有スペースのアルコール除菌を徹底し、感染拡大を防ぐよう努めながら運営を行っております。