<grow with google>"はじめてのデジタルマーケティング"受けてみた
夜に寝て朝に起きる生活ってなんか生きてる感じをすごく実感しますね
そんなことはどうでもよくてgrow with googleで提供されているやつ受けてみましたっていうのかきたくなったので書いてます。
ということで目次
目次
- そもそもなにそれ
- なにを受けたの？
- 受けるまでの手順は？
- 受けての感想は？
1.そもそもなにそれ
っていうはなしですよね。 grow with googleというのは2019年の4/22にはじまった、googleの育成サービスのようなものです。 専門性の高い内容から、働き方改革的なとこまで色々ある凄いやつです。
2.なにを受けたの？
色々種類があるのですが、今回は"はじめてのデジタルマーケティング"を受けてみました。 この講座はビジネスの領域で、googleのあれやこれやを使いたい人向けの講座の一つです。タイトルからわかるように初心者向けの内容になってます。
3.受けるまでの手順は？
この講座での流れなので、他の講座になると多少違いがあるかも。そこは他の受けてみたらまた追記します。 この講座の場合は、上のサイトから、udemyの講座サイトにアクセスして受けるって流れでした。
4. 受けてみての感想
コンテンツとしてまとまっていてとてもわかりやすかったです。
最後の講座にこの先の詳しいところはgoogleの公式ワークショップ使ってね〜的な話があったのですが、基礎知識の習得という意味でとてもいい内容でした。
google Analyticsとか関連したツールの活用する場面とかがわかりやすく解説されているのもとても良かったです。
研修で、デジタルマーケティングについて色々受けていたのですが、元々の基礎知識が不足していたと思っていたので、そういった部分の補強ができるという意味でもとても良かったです。
<ruby><cloud vision>ポケカの画像から情報読み取ろうぜ(と思ってた)
高専を卒業しました。 卒業エントリ書くかと思ってたのですが内容まとまらないし、卒業直後で書いてもっていう気がしたので時間をおいて書くかなと思ってます。
ということで、今回はcloud Vision APIを使ってポケモンカードの情報を画像から読み出そうっていうことをした記録です。
目次
- やること
- 今回使う技術
- 詳細な要件
- 実際のプログラム
- やった結果
- その他
1.やること
今回やりたいことの最大の目標として、カードの写真パシャパシャしたら持っているカードの一覧自動で作りたいっていうことが目標です。そのなかでも、今回は画像からカードの情報を取得するところを作ってみます。
2.今回使う技術
今回はgoogleの画像処理系のAPIのgoogle Cloud Visionを使います。
これは、画像に写っているものを識別したり、画像に写っている文字を読み込んだりできます。 特に、この中のOCR機能を用いて、カードの情報を取得します。
3.詳細な要件
今回はポケモンカードの識別を目標にします。 そのなかでも特に
を撮影して、その画像から、
を取得します。
4.実際のプログラム
ここからは実際のプログラムです。 今回はrubyを使って書きました。 理由としては、今後web appとしてrailsのアプリ作れたらいいかもとおもったからです。(いいかもと思ったなのでやるとは言っていません
ということで実際のプログラムです。
まず、前提として、cloud visionのサイトにアクセスしてAPIキーを取得します。
今回は作成したコードをgithubにあげて管理しようと思っていたので、APIキー等は全てINIファイルに保管して、実施のプログラムには書かないようにします。
このINIファイルを用いて情報を取得するgemにinifileというものがあります。
今回はそれを用いて設定情報を管理します。
まずは使う設定ファイルは以下の感じです
gemもあるらしいのですが、環境に導入できず、困った結果、この記事にたどり着き、試したところで来たのでこの記事を参考に作成しています。 ほぼ共通しているのですが、画像のファイル名をコマンドライン引数で受け取るようにし、画像の解析をINIファイルから取得した形式で行なうように修正しています。
その上で、取得した情報をJSONでパースします。
パースするデータがこんな感じですって言って見せたかったんですが、カードの情報を全部乗せるのは著作権的にもマズそうなんで、やめときます。
その読み込んだデータをもとにして、情報を切り出します。
この先全般著作権に関わりそうなので書くのは控えますが、include?を使って情報を探して、結果を探し出します。
実際にやってみた詳細はもう少し作成が進んだら追記します。
とりあえず今回はこれで
<JavaScript>同じclassのフォームをidと関連付けて取る
忙しい時期をとりあえず超えたので遊びで作ってみるお
目次
- やること
- 新規で使うこと
- 実際のコード
1.やること
今回はおんなじクラスのformから情報をとってきます。 取得する時に、同じクラスのフォームにそれぞれでidを割り振っているので値とidを関連付けて取得します。 読み込んだデータは(今回は特に何もせず)出力だけします。
2. 新規で使うこと
今回は新規で使うことととしては発火させるトリガーをonclickからeventlistenerにしました。 eventlistenerを用いた理由としてはhtml側で発火させるタイミングいじるのもめんどくさくなる(?)のでjs側で全部調整したいと思ったからです。
queryselecter使ってみようかと思ったんですけどidとclassで混乱しそうだったのでやめました
3. 実際のコード
今回はcodepenを使ってみます。 まずは全体の完成物から
formにテキストを入力してpushを押すと、フォームのid+フォームの内容が出てきます。
See the Pen 同classでIDとvalueを関連付けて保存 by Ryo NIioka (@poolbooyer) on CodePen.
まずは今回の大きいところ
イベントを聞くところ
const target = document.getElementById("push"); target.addEventListener('click', view_data, false);
ターゲットになるelementにaddEventListenerを追加します。
ターゲットを指定してその時に使いたいイベントを選択して発火させれます。今回はボタンを選択してポタンがクリックされたら発火します。
次、発火させる内容
今回は情報を読み出す関数と表示する関数を呼び出してるんでそこの話は飛ばします。
実際に情報を呼び出す関数
function get_elements(classname) { //取得するクラスの要素数を確認 var list_len = document.getElementsByClassName(classname).length; //取得した値を保持するarray var json=[]; //要素数だけ実施 for (var i = 0; i < list_len; i++) { //対象の要素を1つずつ取得 input = document.getElementsByClassName(classname)[i]; //IDと値を取得し、配列に追加 var add={id:input.getAttribute("id"),value:input.value}; json.push(add); } //取得した情報を返す return json; }
やってることとしては配列に対して取得した情報のオブジェクトを追加している形になります。追加結果を返します。
表示する部分はこんな感じ
//取得した情報を表示する関数 function add_data(data){ //表示用のリストを作成 var text="<dl>"; //取得したフォームの個数分実行 for (var i=0;i<data.length;i++){ //リストの要素を追加 text=text+"<dt>id:"+data[i].id+"</dt><dd>value:"+data[i].value+"</dd>"; } //タグを閉じる text=text+"</dl>"; //表示エリアを取得 var area=document.getElementById("output_area"); //表示する area.innerHTML=text; }
使いみちもなく作りましたがトリガの勉強になったので良かったです。 (とつぜんのまとめ)
