開発合宿で下関に行ったのに寿司を食べていない
こんばんは。
弊社では約3ヶ月周期で開発合宿というものがあります。
自由参加で、ルールは 「仕事をせずに、作りたいものを作る」 です。
今回は下関のゲストハウス ウズハウス さんにお世話になりました。
関門海峡を一望でき、内装がオシャレでキレイ！また行きたいなあ。
唐戸市場のすぐ近くにありますが、そこらへん行ったら食べたいのがやはりお寿司。
ただ朝方までプログラム書いてたら寝落ちし、朝イチ寿司チャレンジは失敗。。
合宿でやったこと
前置きとして、現在社内の一角にお菓子販売コーナーがあり、一つ100円で購入することが出来ます。ただ、
小銭を用意する面倒さ
100円が無いときに崩す必要がある
といった課題もあります。
そこで、社内専用の仮想通貨を発行して、それで決済しちゃおうってのをやってます。
僕は今回、 社内でお菓子購入の際のキャッスレス化のためのAlexaスキル開発 をしました。
こんな感じです。 Alexaに注文したらQRコードを出してくれるようにする というのが今回の目標です。
システムの構成はだいたいこんな感じです。
QRコードも出力されるとこまでいき、7割ぐらい出来てきてる感あります。
残す課題は、
amazon echo spotにキレイに画像成形して表示
alexaへ入力された商品に応じた情報表示
あともう少し。。
Fusic ではエンジニアを随時募集してます。
興味があれば連絡ください！営業・マーケティング・技術営業も募集中です。
NativeScript-Vueを使って、社内仮想通貨決済&送金アプリを作ってみる（途中）
こんばんは。こんにちは。 １ヶ月以上間が空きましたが、久しぶりに更新します。 4月の最後の更新の後に体調を3,4週間ぐらい崩してキツかったので、そのまま更新しませんでした。(2週間で2回、39度後半の発熱) 人生で一番体調を崩した期間が、入社してすぐの時期に被ってしまったのはしんどかったです。治ってよかったー。
昨日は会社の開発合宿というものに行ってきました。 会社の業務時間を使って、業務とは全く関係ない自分が作りたいものを作るという合宿です。 複数人でチームを組み、一泊で何か作り翌朝にデモをします。 こういうイベントはほんとにありがたいなと思います。 ちなみに他のチームでは、音声認識でミニ四駆を動かしたり、機械学習で大谷の投球球種を当てる、など面白い作品ばかりでした。
僕は、最近リリースされたというNativeScript-Vueを使って、社内仮想通貨の決済＆送金アプリの開発を試みました。 会社では、100円を払ってお菓子を買えるやつがあるのですが（実は使ったことない）、小銭を持つという面倒を省く、個人間での送金のやり取りを行えるようにという目的があります。 androidやiosアプリの開発ではjavaやswiftが使われますが、NativeScript-Vueを使うことでvue, html, cssでコーディング出来るというものです。
先輩と2人でチームを組み、僕はNativeScript-Vueでアプリを作成、先輩は送金処理の方を担当しました。 ちなみにNativeScript-Vueを触ったのは初めてで、Vue.jsも初でした。 なおこの通貨はEthereumベースのものです。 結論から言うと、僕のアプリの方は完成しませんでした。くそう。
実際に作った画面がこんな感じです。xdebugのsimulatorでiPhone6を起動させてます。
コードはこんな感じです。（送金画面のみ）
<template>
<Page class="page">
<ActionBar class="action-bar" title="アドレス入力">
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
</ActionBar>
<StackLayout class="hello-world">
<!-- <Label :text="sender" /> -->
<Label class="body" textWrap=true text="送金先のアドレスを入力してください"/>
<TextField v-model="sendee" />
<Label class="body" textWrap=true text="金額を入力してください"/>
<TextField v-model="price" />
<Button class="btn btn-primary" @tap="sendEther()" text="送金！"/>
<Label class="body" textWrap=true text="バーコードを読み取る"/>
<Button class="btn btn-primary" text="カメラ起動"/>
</StackLayout>
</Page>
</template>
<script>
const httpModule = require("http");
var BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
var barcodescanner = new BarcodeScanner();
// import send from "./send";
export default {
data() {
return {
address: null,
// sender: "someone's address"
}
},
methods: {
sendEther(){
console.log('kawano');
httpModule.request({
url: "https://httpbin.org/post",
method: "POST",
headers: { "Content-Type": "application/json" },
content: JSON.stringify({
sendee: this.sendee,
price: this.price,
sender: this.sender,
})
}).then((response) => {
const result = response.content.toJSON();
}, (e) => {
});
},
scanbarcode() {
barcodescanner.scan({
formats: "QR_CODE,PDF_417", // Pass in of you want to restrict scanning to certain types
cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
showFlipCameraButton: true, // default false
preferFrontCamera: false, // default false
showTorchButton: true, // default false
beepOnScan: true, // Play or Suppress beep on scan (default true)
torchOn: false, // launch with the flashlight on (default false)
closeCallback: function () { console.log("Scanner closed"); }, // invoked when the scanner was closed (success or abort)
resultDisplayDuration: 500, // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
orientation: "landscape", // Android only, optionally lock the orientation to either "portrait" or "landscape"
openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
}).then((result) => {
console.log("Scan format: " + result.format);
console.log("Scan text: " + result.text);
},(error) => {
console.log("No scan: " + error);
});
}
}
}
</script>
社内用を考えているので、ログイン認証はAWSのAmazon Cognitoを使う予定でしたが、それの実装が難しく時間を取られすぎていたので途中で断念しました・・・。 また送金画面では、カメラを起動してバーコードからアドレスを取得する機能をつけようとしていました。 これもまた色々エラーが出て解決できなかったというのと、僕が持つiPhoneで実機テストをしたかったのですが上手くデバイスを認識してくれなかったというので、間に合いませんでした。 先読みした準備が足りなかったというのが今回の反省点です。色々と悔しいものが残りましたー。
送金処理は先輩が完成させてくれました。ブラウザ上でテストしたところ、jsで送金できるようになったので、これからアプリに組み込んでいかないといけません。
初めてNativeScript-VueとVue.jsを使ってみた感想としては、 - android・ios問わずアプリ開発ができるのでラク - JSのフレームワークvue.js超ラクじゃん って感じです。
送金処理の方も触ってみたいなーと思います。
ちなみに、今回の合宿は直方のいこいの村であったのですが、静かで良いとこでした。 いつもと違う旅館の環境や、畳で寝転がって開発するのは気分が違って楽しかったです。
新卒 研修7日目 JavaScriptと格闘(part2)の末、高熱＆8日目
こんばんは。たつろーです。
この記事は昨日、一昨日についてのものになります。
JS(JavaScript)に慣れるまで時間がかかっております。Webサイトに動きをつける言語なので、楽しいんですけどね。
「動け！」と思って書いたコードが動かない。そしてまた書き直して『今度こそ』と思えど動かない。
三度目の正直でやっと動く、今はなんとかその段階に着こうとしてる感じです。
だからこそ面白いんです。これと同じで、思い通りにいく人生なんてつまらないじゃないですか。
いやまぁプログラムは思い通りに動かせないとダメですが。
タイトルにあるように一昨日の夕方から39℃超えの熱を出しました。昨日病院に行ったんですけどインフルは陰性で普通に風邪って言われました。
その日夕方ぐらいまでずっと38℃ぐらいだったんでかなり疑ってましたけど、今朝起きたら治ってたので謝ります。疑ってすんませんドクター。。
さて、JSとの闘い（課題を解くこと）に時間を食い過ぎたためペースアップする必要があります。時間を取りすぎるのには、自分で考える・ググる時間が多いことが主な原因となっています。まだ知識が浅いので、現段階では
『こういう技術あったな』と思い出せるように多くの課題に触れておく
その技術に関するキーワードを知っておく（自分で調べられるために）
が重要だと先輩から教えて頂きました。現在の時間の使い方を再考して、15分考えて・調べてできなかったら知識・実力不足ってことで先輩に助言をもらうようにしました。
そして、考える→知る→理解する→記録するのサイクルを回すように今は意識してます。研修の序盤に先輩が「サイクルを回すことが大事」と言ってたことに納得しました。
さて、今回の課題の一つはこんな感じです。
左側のクリックを押したら選手が増え、右側のクリックを押したら選手の名前を順番にアラート表示するプログラムです。選手を削除できるようにもしてあります。
<div>
<button onclick='add()' id='btn1'>クリック！</button>
<button onclick='alertbtn()' id='btn2'>こっちもクリック！</button>
</div>
<table>
<thead>
<tr>
<td>No.</td>
<td>名前</td>
<td>削除</td>
</tr>
</thead>
<tbody id="table1">
</tbody>
</table>
<script>
var player_num = 0; //global
function add(){
//trを定める
var add_tr = document.createElement('tr');
//tdを定める
var num_td = document.createElement('td');
//tdにnumberを入れる
var num = document.createTextNode(player_num + 1);
player_num++; //increment
//tdを定める
var player_td = document.createElement('td');
var playerNames = ['Tatsuro Kawano', 'Mr. Seike', 'Cho Jiho']
var del = document.createElement('td'); //deleteのtdを定める
var del_btn = document.createElement('input'); //deleteのbutton
del_btn.type = 'button';
del_btn.value = '削除';
//del_btnが押された時の即時関数
del_btn.addEventListener('click', function () {
//del_btnの親の親の要素＝ tr を削除
del_btn.parentElement.parentElement.remove();
}, false);
// add_trに対して、tdを付け加えて行く
document.getElementById("table1").appendChild(add_tr); //trを追加
add_tr.appendChild(num_td).appendChild(num); //numberのtdを追加
//剰余を使ってplayerNameを変えて行く
add_tr.appendChild(player_td).appendChild(document.createTextNode(playerNames[player_num % 3]));
add_tr.appendChild(del).appendChild(del_btn); //delete_btnの作成
}
function alertbtn(){ //アラートで名前を順番に表示する関数
var array = document.getElementById('table1').children; //tbodyをarrayに
var alert_num = array.length; //アラート表示回数alert_num
for(var i = 0; i < alert_num; i++) {
//名前取得
var str = document.getElementById('table1').children[i].children[1].innerHTML;
alert(str); //アラート表示
}
}
</script>
これ結構時間かかりました。。この部分
//del_btnが押された時の即時関数
del_btn.addEventListener('click', function () {
//del_btnの親の親の要素＝ tr を削除
del_btn.parentElement.parentElement.remove();
}, false);
のように、どれかの削除ボタンを押した時にその行がどこであるかを判別して削除するのですが、parentElementの使い方をイマイチ理解してなかったので手こずりました。
でもJS（他の言語はよく知らない）では頻繁に出てくるので慣れておかなければ。（結局jQueryを使うことになると聞きます）
以上です。病み上がりなので寝ます、おやすみなさい。
新卒 研修6日目 JavaScriptと格闘
こんばんは。
研修6日目です。
JavaScriptの課題に苦戦しております。進捗が遅くてもどかしいです、、が、課題を理解できる度に快楽物質がでる感じがあって気持ち良いです。研修気持ちいいです。
今日はこんな課題
クリックを押して3秒後にアラートがでる問題です。
僕はこんな感じでコーディングしました。
<div class="div1">ボタンをクリック！</div>
<div class="div2"><input type="button" value="クリック！" id="button1" onclick='btnClick()'></div>
<script>
var msg = "反応ないと思ったら3秒後なんだなぁ";
function showMsg(){
alert(msg);
}
function btnClick() {
setTimeout(function() {
showMsg();
}, 3000);
}
</script>
onclick= 'btnClick()'というように書くことでボタンがクリックされた時に関数を呼び出せるんですね。
優秀な同期から btnClick()のカッコ内には引数を与えるべきだとアドバイスをもらったんですが、その理由を忘れてしまった・・メモ不足。
こんな課題も。
クリックを押すと、0.1秒間に1ずつ増えていき、もう一度クリックすると止まるという問題。 以下、コード。
<div class="div1">ボタンをクリック！</div>
<div class="div2"><input type="button" value="クリック！" id="click" onclick='btnClick()'></div>
<div class="div3"><input type="text" value=0 id="number"></div>
<script>
var buttonState = false; //初期値、button押されてない状態
function btnClick() { //ボタンクリックで始まる関数
if(buttonState == false){ //ボタンが押されていない状態の時（未スタート）
buttonState = true;
repeat = setInterval(function() { //100ミリ秒毎に数値を増やしていく
document.getElementById("number").value++; //テキストボックスの数値を取得する
}, 100);
}else { //ボタンが押されているとき（カウントアップしている時）
buttonState = false;
clearInterval(repeat); //setIntervalを止める
}
}
</script>
buttonが押された時の状態をどのように取得しようか考えましたが、プロパティからは取得できないしどうしよう・・と考えましたが、変数buttonStateにtrueorfalseを与えて判定させられる、と先輩から教えてもらいました。
また、clearInterval()はsetInterval()を停止させる命令文なんですね。セットで使うというわけですか。なるほど。
現段階では「この関数を使えばこれができる」など短絡的な理解が多いですが、今こうやってまとめてみたら全体の構造などを理解する必要があるなと思いました。
今日はこんな感じです。プログラミング楽しいですね。。ではお休みなさい。
新卒 研修４日目 HTML,CSSでカレンダー作成・JavaScript基礎
いつでもこんばんは。
２分で読み終わります。
今日はHTML,CSSを使って、カレンダーを作成しました。 table, tr, tdを使って作成しました。
昨日までの３日間、HTMLとCSSの課題に取り組んだので、それを踏まえて作成しました。 本ブログでは積極的に恥を晒していこうと思うので、ソースコードも載せちゃいます。 div, tableを使って作成しました。
カレンダーお手本はこちら
作成したものがこちら
ソースは以下 ※html, css共に 一部抜粋
<div class="april">
<span class="fs70">4</span><br>
<span class="fs30">2018</span><br>
<span class="fs15">平成30年</span><br>
<span class="fs20">April</span><br>
<span class="fs10">卯月</span><br>
</div>
<table class="hako">
<tr class="days">
<td class="date">mon</td>
<td class="date">tue</td>
<td class="date">wed</td>
<td class="date">thu</td>
<td class="date">fri</td>
<td class="date sat">sat</td>
<td class="date sun">sun</td>
</tr>
<tr class="line0">
<td class="date">26</td>
<td class="date">27</td>
<td class="date">28</td>
<td class="date">29</td>
<td class="date">30</td>
<td class="date sat">31</td>
<td class="date sun">1</td>
</tr>
<tr class="line1">
<td class="date">2</td>
<td class="date">3</td>
<td class="date">4</td>
<td class="date">5</td>
<td class="date">6</td>
<td class="date sat">7</td>
<td class="date sun">8</td>
</tr>
CSSは以下
height: 700px;
width: 800px;
}
body {
height: 100%;
width: 100%;
}
.kakoi {
height:100%;
}
.april {
float: left;
height: 100%;
width: 12.5%;
color: white;
text-align: center;
background-color: blue;
}
.date {
width: 100px;
height: 100px;
vertical-align: top;
text-align: left;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
/*
一番上の曜日が書いてある行の文字を,bottomに表示したい
右の線を消したい
*/
.days > td {
vertical-align: bottom;
border-right-style: none;
height: 30px;
text-align: left;
}
今日知ったのは、.css内の .days > tdのように、daysクラス内のtdタグという風に限定してプロパティを指定できることです。
また、.css内のaprilクラスでfloat: left;を与えていますが、これはどこかで回り込み解除する必要があるんですね。
そうでないと、永遠に右側にブロックが回り込み続けてしまうと・・。
先輩から指導いただきました。
いろんなルールがありますが、とりあえず今は情報の嵐を浴びまくってコード書いて慣れるしかないと思ってます。 再度同じような課題に出会った時に思い出せるようにしとくためにも、復習&アウトプットしないとなぁ。たつを。
あっ、JavaScriptについてはまた更新します。。
p.s.
うちの会社は天神にあるのですが、天神駅で降りて歩いて４分で着いちゃうのでそれはもうラクなんです。
今日も雨が降ってましたが、天神地下街から出て２分ほどだからあまり濡れずに済むんです。
ただ、雨の日は満員電車なんですねぇ。。１０分しか乗らなくて良いのでマシですが。 ポジション取りをミスったら圧死します。天神で働きたい人は体幹を鍛えましょうね。
新卒 研修3日目 CSS課題
いつでもこんばんは。
１分で読み終わります。
はてブ初記事なので簡単に自己紹介します。
24歳、新卒未経験でIT企業のプログラマーとして入社しました。 大学院では半導体を専攻していたので、プログラミングは授業で習った程度です。もう5年前の話だー。。
このブログでは、プログラミングほぼ未経験者にうぶ毛が生えていく、というより毛根ができ始める過程を発信していきます。
詳しくはプロフィールに。
と、今日で研修3日目が終わった訳です。 1日目、2日目はオンラインプログラミングサービスで基礎課題に取り組みました。（1日目の記事：Qiitaへの投稿） 本日はそれを踏まえ、会社から与えられた課題をこなしていく感じでした。謎解きみたいで楽しいもんですね。
例えば、こんな感じです。
.cssをいじっていきます。 基礎知識がまだ身に付いていないので、前日にやった課題を思い出し、調べながらコーディングしていきます。分からない部分は先輩にアドバイスをもらいながら。。
さて、このブログは備忘録も兼ねてます。アウトプットして覚えるのです。新たな事を色々と知るのは楽しいですね。以下備忘録。
◇ブロックレベル要素の中にインライン要素を入れることは可能だが、その逆は誤り
◇widthは、テキストをもつdivタグの幅を決める
参照：Ginpen.com
具体例としてソースの一部を載せたかったんですが、マウントしてコードを書いていた＝会社のサーバーにコードを置きっ放しであることに気づきました。。手元に置いとかんといかんですねぇ。
明日はHTML、 CSSを使ってカレンダー作りをしていきます。もう一人の同期は既に終わってるので、僕も頑張ります。
p.s.
一昨日、Qiitaに初投稿した僕の記事「新卒 研修１日目 HTML基礎」がトレンド入りしてました。今見たらなんと3113viewsになってました。 実はtwitterで記事エゴサしたんですが、
いつからQiitaは日報サイトになったんだwww
これ、組織的な「いいね」があるんじゃないか
などの声を見つけました。
Qiitaのガイドラインには「プログラミングに関する知識を記録・共有するためのサービス」とあり、確かにそうだなと思ったので、日々の研修などの過程はブログに書いていくことにしました。確認してなかったんでですね、。
組織的いいねってつまり、僕は会社の名前を出してるので、会社メンバーで短時間に「いいね👍」を押してトレンド入りさせることで、会社の名前を広めようとしたって理解で合ってますかね？ちなみにこの発想は、僕の脳みそのどこにも存在しておりませんでした。。
それではまた。
