信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    Vuejsって聞いたことある?

    こんちわ!新納です。突然ですが皆さんVue.jsって知ってます?読み方はビュージェーエスです。JSではいろんなライブラリが出ていますよね。その中でもjQueryは特に有名で使いやすいライブラリだと思います。個人的にも、jQuery大好きです。(簡単にかけるので)ですが、jQueryも簡単は書きやすい反面ミニマムな機能実装にはおすすめですが大規模、且つ複数のJSファイルに分かれるような状態になると中々メンテが大変な事になってきます。更に、あまり良いこととは言えませんがjQueryでは階層指定でバインドしている場合も多々あると思うので、うかつにHTMLをいじると既存処理が動かなくなったよーなんてことになったりします。.parent().parent.().children()……とかやっていると少しHTMLいじっただけで死ねますよねwまあ双方向バインディングとかVirtualDOMとかいろいろ特徴があるのでとくとくと説明していきたいところですが、今回はあまり概念には触れず超簡単なサンプルを使ってjQueryとの書き方の違いを比較したいと思います。コピペのまま動くようにしたいので今回はどちらのライブラリもCDNからロードしています。★やりたいこと痩せるためにはボタンを押したらリストの2番めの要素の文言を『昼はぬいてダイエット』に変える◆jQueryの場合-----------------------------------test_jquery.html<html lang="ja"> <head> <meta charset="UTF-8"> <title>てすと</title> </head> <body> <div id="content"> <input type="button" value="痩せるためには"> <ul> <li>朝ごはん</li> <li>昼ごはん</li> <li>晩ごはん</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="./test_jquery.js"></script> </body> </html> test_jquery.js$(function(){ $("#content input").on("click",function(){ $("#content ul li").eq(1).text("昼は抜いてダイエット"); }); }); -----------------------------------------------------------------------◆Vuejsの場合------------------------------test_vue.html<html lang="ja"> <head> <meta charset="UTF-8" /> <title>てすと</title> </head> <body> <div id="content"> <form> <input type="button" value="痩せるためには" v-on:click="ibentohakka" /> </form> <ul> <li v-for="gohan in list">{{ gohan }}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="./test_vue.js"></script> </body> </html> test_vue.jsvar app = new Vue({ el: '#content', data: { list: [ '朝ごはん', '昼ごはん', '晩ごはん' ] }, methods: {  ibentohakka: function() { Vue.set(this.list, 1, '昼は抜いてダイエット'); } } }); ---------------------------------------------------------…どうすか?画面で見ると結果は全く同じです。『jQueryの方が記述短いじゃねーかいい加減にしろ!』とお怒りの方。ごもっともです…Vueは特徴的なところが何点かありますね。<input type="button" value="痩せるためには" v-on:click="ibentohakka" />これは、jQueryのonclickと似ています。これが押されたらjsに書いてあるmethodsのibentohakkaが発火し中の処理Vue.set(this.list, 1, '昼は抜いてダイエット’);が実行されます。<li v-for="gohan in list">{{ gohan }}</li>jQueryではHTMLに直接リストを記述しましたが、Vueはリストの部分にこれしかありません。これは、gohan in listの部分でデータ・セットの部分data: { list: [ '朝ごはん', '昼ごはん', '晩ごはん' ]},のリストをループして出力します。jQueryだと$("#content ul li").eq(1).text("昼は抜いてダイエット”);でdomを指定して値を書き換えていますが、これだと例えばulの要素が1つ上に追加されたら想定外の部分が書き換わってしまいます。ですが、Vueであれば<li v-for="gohan in list">{{ gohan }}</li>で作り出したものに対してVue.set(this.list, 1, '昼は抜いてダイエット');としているので、仮にHTMLの階層が変わってしまっても変更したい要素がうまく切り替わってくれます。この短いコードではあまりメリットを感じられないかもしれません。が、プロジェクト規模が大きくなり、HTMLの改修が増えるほどVueのメリットは大きくなってくると思っています。ライブラリを読むだけで使えるしjQueryとの共存もできるのでいきなり全書換は嫌だけど簡単な部分だけでもVueで記述していったらいつか良さに気づく日もくるんじゃないでしょうか。ではまた!
  • レビュー

    コアテックコーポレートが生まれ変わりました!

    コーポレートリニューアル後初投稿となります。つらつら社長の自己紹介しても仕方ないので端的に私は①入社7年目②プログラマ入社③この業界の前はコンサルです。昨年11月末に代表指名を受け社長に就任しました。代表になっても私自身はエンジニアとしての気持ちはずっともっていたいですし技術研鑽も今後もしていきます。エンジニアは水や電気と一緒でできて当たり前、動いていて当たり前の仕事で辛い時も沢山ありますが難しい機能やまだ誰もやったことの無い機能を実現し自分の成長を感じられたり、納期ギリギリで苦しい中一緒に仲間とたまにぶつかりつつも頑張り無事リリースできたり、お客様の想像通りの機能を実現して喜んでもらえる時は無上の喜びを得ることができます。今働いてくれているエンジニアの皆さんにはただ機械のように言われた機能を作るだけではなく上記のような喜びを仕事を通して感じ成長を実感してもらいたいし、多くのエンジニアの皆さんがそう感じられる環境を作っていくのが私のミッションです。創業時期から年々売上も利益も増収増益を繰り返しておりますし70名に拡大した今であってもありがたい事に各所から沢山の仕事のご依頼を頂いておりますが昨今の日本のエンジニア不足事情もあり需要に答えるために2018年5月に海外に子会社を設立しました。https://core-tech.tw/設立1ヶ月たたずして既に4名の入社が決まっており年内30名のエンジニア確保を目標として動いております。これからも多くの仲間と一緒に成長し多くのお客様の願いを叶えられるように動いていきたいと思っております。まあ…私はプログラマなので思うのかもしれませんがものづくりって本当に楽しいですよね!コアテックは今年で創立10周年を迎えます。10周年という記念の年にコーポレートサイトをリニューアルしたのは偶然ではありますが、制作会社である以上、発信し続ける姿勢は変わらず持っていたいと考えます。弊社が持っている技術・知識を発信しつつ、コーポレートサイトにて披露して参ります。
  • テクログ

    機械学習やっちゃうよ!

    こんにちは、ni-yoです。 世はAIというワードを日常的に目にするようになってきておりますが、今回は超簡単なサンプルからAIプログラムの世界に少し触れてみたいと思います。 今回は機械学習では非常にメジャーなライブラリであるscikit-learnに触れてみます。※本内容はni-yoが勝手に考えたケースなので、機械学習として適切な内容とは限りません。 pyhton3が入っていて、pip3が使える前提で話をしていきます ターミナルコマンドで以下を入力pip3 install -U scikit-learn scipy matplotlibデータ整理に使うモジュールも入れましょうpip install pandas ここまで入れればひとまず準備は完了です。Let’s 機械学習! 今回は、2つの値を与えて左の数値が大きければ0を返し、右の数値が大きければ1を返すという処理を想定します。最初にサンプルとしてデータと正解を与えて学習させるやり方を『教師あり学習』と言います。 また、最期に機械学習の予測結果が合っていたかを検証する処理を作っています。  教師データとするのは、以下のようなデータです。   [1,4,1], #右が大きいので1     [2,1,0], #左が大きいので0     [3,2,0], #左が大きいので0     [2,3,1],     [3,7,1],     [6,4,0]の1、2番目の数値が与えるデータ。3番目が正解データです。下記処理にて値を取り出しています data = df.ix[:,0:1] #与えるデータ label = df.ix[:,2] #データに対しての正解 ここで機械学習の基本、サポートベクターマシンを使うためのおまじないを唱えます clf = svm.SVC() サポートベクターマシンに、先程切り出したデータと答えを与えます。 これがいわゆる教師データになります。clf.fit(data,label) #学習させるclf.fitをして学習が終わったら、与えるデータと予測処理を呼びます与えるデータは、今回は少し多めに10コ与えて正解率をみていきます。yosokudata = [ [5,4], [0,1], [1,2], [6,3], [3,4], [2,0], [1,4], [0,2], [3,1], [7,1],]予測してくれるのは、predictという関数ですclf.predict(yosokudata)簡単ですが、上記を踏まえて完成した処理が以下です。最期に、予測結果があっているかどうかを検証する処理を付け加えます。 sample1.py-------------------------------------import pandas as pd from sklearn import svm,metrics input = [    [1,4,1],     [2,1,0],     [3,2,0],     [2,3,1],     [3,7,1],     [6,4,0] ] df = pd.DataFrame(input) data = df.ix[:,0:1] #DATA index label = df.ix[:,2] #DATA label clf = svm.SVC() clf.fit(data,label) #学習させる #予測する yosokudata = [     [5,4],     [0,1],     [1,2],     [6,3],     [3,4],     [2,0],     [1,4],     [0,2],     [3,1],     [7,1], ] yosoku = clf.predict(yosokudata) #予測実行 print("予測結果",yosoku) #検証します for index,kotae in enumerate(yosoku):     print(yosokudata[index][0],yosokudata[index][1],kotae)     if yosokudata[index][0] < yosokudata[index][1]:         seikai = 1     else:         seikai = 0     if seikai == kotae:         print("正解")     else:         print("不正解")—————————————さて…上記の結果はどうだったんでしょうか?スクリプトを叩いて結果を見てみます。python sample1.py予測結果 [0 0 1 0 1 0 1 1 0 0]5 4 0正解0 1 0不正解1 2 1正解6 3 0正解3 4 1正解2 0 0正解1 4 1正解0 2 1正解3 1 0正解7 1 0正解なんと…10問中9問の正解を叩き出しました。普通に0か1だったら50%の正解率になるはずなので、ちゃんと今回教師データから傾向を見出して予測してくれたみたいです。 今後、もっと色々なパターンで機械学習をためしていきたいと思います。
  • テクログ

    PHPとElasticTranscoder

    PHPとElasticTranscoder 皆さんこんにちわ。 ni-yoです。 本日も技術ネタを少々… 弊社はサーバの主流はAWSになっています。 構築の手間と冗長性等を考慮するとオンプレより多方面でメリットが大きく 手放せない存在になっています。 本日はそんな機能の1つElasticTranscoderの紹介をさせていただきます。 Webの世界もクラウド技術の発達等により昔は制限があって実装できないような コンテンツを実現できるようになってきました。 Webの世界もここ近年動画コンテンツの実装率が日々あがってきていることを感じます。 とはいえ、Webでの動画実装はそれほど簡単ではありません。 動画には画像よりもずっと多くの規格があり、(mp4/avi/wmv/flv等) 反面Webブラウザで再生できる規格にはある程度制限があります。 例えばYoutubeのようにユーザ投稿型のコンテンツを作ろうという場合、 ある程度ブラウザで再生できる規格に変換する必要性があります。 この作業をエンコードと言い、動画変換作業の中でデジタル映像をアナログ信号に デコードしないでエンコードを行う作業をトランスコードと言います。 今回紹介するElasticTranscoderはこのトランスコードの作業をAWSでできる技術です。 今回はWebで考えるのでPHPからElasticTranscoderへジョブ通知することにスポットし、 ElasticTranscoder自体は詳しく掘り下げません。 ざっと手順を言えば ①トランスコード元ファイルを配置するS3フォルダを作成 ②トランスコード済みファイルを配置するS3フォルダを作成 ③ElasticTranscoderの入力を①、出力を②で指定したパイプラインを作る ④ElasticTranscoderにアクセスできるIAMを作る。 ⑤IAMの鍵をPHPのソースに記載して①のS3にファイルアップ、パイプラインに変換指示を送る ⑥パイプラインがトランスコード処理を行い、出力先にトランスコード済みファイルが配置される。 のような手順です。 ⑤の部分のPHPプログラムは例えば下記のようになります。 public function getInstance() {         $this->obj = null;         if (is_null($this->obj)) {             $this->obj = Aws::factory([                 'key'    => (IAMで設定したkey),                 'secret' => (IAMで設定したパスワード),                 'region' => Region::TOKYO             ])->get('ElasticTranscoder');         }         return $this->obj;     }     public function createJob($args) {         try {             $res = $this->getInstance()->createJob($args);         } catch (Exception $e) {             echo $e->getMessage();             return false;         }         return $res;     }          public function transcode() {           $result = $this->createJob([             'PipelineId' => (③で作成したパイプラインのID),             'Input' => [                 'Key' => (入力S3に配置したファイルパス),             ],             'Outputs' => [                 // mp4 & Thumbnail                 [                     'Key'              => (出力先に配置したいファイルパス),                     'PresetId'         => '1351620000001-100070',                     'ThumbnailPattern' =>(入力S3に配置したファイルパス)."-{count}"                 ],                 // webm                 [                     'Key'             => $mp4Keyfile.'.webm',                     'PresetId'        => '1351620000001-100240',                 ]             ],         ]);     } transcode関数をコールした時点で入力用S3には動画ファイルを置かれている前提です。 これで、出力したいファイルパスにはmp4とwebmという形式で変換された動画が配置されるはずです。 今回は例としてmp4とwebm形式を指定しています、PCとスマートフォンの対応という部分を考えれば この2つのフォーマットを作成すればほぼカバーできると思います。 もし、それ以外の形式で出力したければ 'PresetId'         => '1351620000001-100070', をそれに準じたものに変更すれば出力されます。 この出力形式はプリセットと呼び、出力したい最適なものを https://docs.aws.amazon.com/ja_jp/elastictranscoder/latest/developerguide/system-presets.html から選択して使用するか、細かい設定をしたければ自作でプリセットを作成することができます。 簡単ですが以上です。 今まで動画配信業者等を使わなくては実現できなかった部分が自前でできるので日々技術進歩を感じますね。 それでは (^-^)ノ
  • テクログ

    Database:Mysqlがめっちゃ重い時

     こんにちは、ni-yoです。すごく開発者向けな話になりますが、MysqlのDBが応答返せないくらいめっちゃ重い。モニターするとDBのCPUやメモリが異常に高騰している…とかありますよね。 その時に負荷の原因となり得る時間がかかっているクエリを探すためには、SHOW FULL PROCESSLISTというコマンドが便利です。 MYSQLのSQLを発行する画面でSHOW FULL PROCESSLIST;を実行! 出てくる一覧としては、idUSERHostdbCommandTimeStateInfoがでてきます。 IDはプロセスIDUserはMysqlの実行ユーザ名Hostは接続元dbは対象のデータベースTimeは実行している時間(秒)Stateは実行している状態(init処理、データ送信処理等の状態)Infoは実行しているモノ(主にSQL)です。 見方はわりとシンプルにCommandがQuery且つTimeが異常に高い値(数十秒を超えている等)を探します。そういったSQLがあった場合例えばIndex不足で異常に処理時間がかかっていたりという可能性があります。 もしそれがあった場合、Infoに書いてあるSQLを確認して、どの処理から発行されたSQLなのか、そのSQLは正しいSQLなのかを確認しておくと後に同様の事象が発生する事を抑止することができますが、どちらにせよそういった原因となるSQLがいつまでも動いていては負荷の原因が取り除かれませんので、勇気を持ってMysql上から問題のプロセスを取り除きます。 SHOW FULL PROCESSLISTで下記のような時間がかかっているSQLが発見された場合(Timeが300なので5分間応答が返ってきていない)45384100 root (発行元IPアドレス):(ポート番号) (テーブル名) Query 300 Sending data SELECT DISTINCT…(省略) KILL (プロセス番号)で上記SQLの実行を停止できます。 プロセス番号は一番左のカラムになりますので、勇気を持って下記コマンドを実行します!KILL 45384100をたたくと、他の動作には影響を与えず上記問題のSQLの実行を強制停止できます。(Windowsのタスクマネージャにあるプロセスを落とすのと同じような感じです) 何か異常に時間がかかる場合は上記処置で負荷は改善されるかと思います。 負荷の原因は一概に言えませんが、例えばSHOW PROCESSLISTでプロセスが100個とか出てくるのは基本的には異常であると見なせると思います。 例えば月1千万PVあるサイトだったとしても、1秒で考えれば10,000,000 ÷ 30(日) ÷ 24(時間) ÷ 60(分) ÷ 60(秒) ≒ 4回/秒ということなので、もちろんピーク時間のなどはありますが慣らすと1秒に4回程度の閲覧になるはずです。 ユーザページで様々なSQLを発行しているとしても大概のWebサイトはシングルスレッドで1つのSQLが終わったら次を発行の動作しているとは思うのでSQLの個数を考えるとしたら概ね10個以内に収まるはずです。 月数億PVも行くような超大手のようなサイトでは上記の考えはあてはまりませんが、月1千万PV程度にも満たないサイトがプロセスが100個以上いくような場合には、Mysqlのコネクションが切れない(もしくは不必要に長い)設定がサーバにしてある。DosやDDos等通常ありえない大量のリクエストが送信されている。等の部分を確認する必要があるかもしれません。  それでは(* ̄▽ ̄)ノ~~ マタネー♪
  • テクログ

    ソフトウェアテストについて

    こんにちわ、本日はシステムのテスト手法につきましてわかる範囲で書いていきたいと思います。 システムのテストを全くやったことないよっていう人はSE/プログラマの方の中にほとんどいらっしゃらないかと思います。 例えば業務システムの場合、テスト専門部門(品質保証部門)を用意している企業も珍しくはありませんが、どんな作り手の方でも最低限の単体テスト(UT)くらいは実施しますよね。 今回はその際のテストについてです。 システムのテストは大きく2つの分類に分けられます。 ・ブラックボックステスト ・ホワイトボックステスト の2種類です。 違いは以下の通り。 ブラックボックステスト…システムの外部に着目して仕様通りかどうかのテストを行う ホワイトボックステスト…システムの内部構造に着目してテストを行う 例えば、ここに 『身長を入力したら 165cm未満で低め/165以上180以下で標準/それ以上は高め を結果として表示してくれる PHPプログラムがあったとします。処理としては、非常に簡素ですが以下とします。 index.html 身長: calc.php コードに関しては特に説明する必要もないくらいですね。 入力された結果をcalc.phpに渡してその判断結果をprintするだけです。 さて、まずは上記のプログラムに対してテストを行う場合に、ブラックボックステストで行う場合のテストケースを考えてみましょう。 仕様は上に書いたとおりです。 ブラックボックステストを漏れが少なく行う為の有効な手法の1つとして、同値分割と限界値分析(境界値分析)という手法があります。 ◆同値分割とは 入力を同じように扱えるグループに値を分けたものを同値クラスと呼び、それぞれの代表的な値を用いてテストを行う。 有効な同値クラスを、有効同値クラス、無効(エラー)となる同値クラスを無効同値クラスと呼ぶ。(ソフトウェアテストwikiより) →要約すると『同じように扱えるグループの代表的な値を入れる』って事です。 上記の例では、 164cm以下なら『低め』が返るグループ 165~179cmなら『標準』が返るグループ 180cm以上なら『高め』が返るグループ 同値分割を使用してのテストは、各グループの代表値を使用してテストケースを作成します。 上記はすべて有効同値クラスと言われるものですね。 例えば、上記テストケースを作成するとしたら以下のような感じでしょうか? 身長の入力:期待される結果 100       :低めが表示されること 170       :標準が表示されること 190       :高めが表示されること 同値クラスは、あくまでその地域の代表となる値なので特にどの数値がいいとかいうのはないので、上記は各クラスから適当に抜き出した値です。 有効同値クラスのテストは上の例のようなもので問題ありません。 逆に無効同値クラスを考えたときに、例えば負の値が入力された場合を考えます。 すると身長でマイナスというのは本来存在しないが(厳密にいうと極端に低い値も存在しないとは思いますが)、入力では入れることができるマイナスの数値のケースが上記プログラムでは抜けている事に気づく事ができます。 現状のプログラムではマイナスが入力された時にも『低め』が表示されるので、身長の事なんだからマイナスの場合はエラーを表示させる必要があるかもという発想に至ることができます。 実際のプログラムでは、このような異常ケースを考えていない事が致命的な不具合につながることがあります。 エラーケースを考えて仕様に『身長がマイナスの場合は正しい値を入力してくださいと表示する』という仕様が追加されたら、 無効同値クラスのテストケースは下記のものを追加でしょうか。 身長の入力:期待される結果 -5        :正しい値を入力してくださいと表示されること。 さらに無効同値クラスを考えるときに、例えば数値以外の入力があった場合を考えたとします。 先ほどのエラー処理をいれたソースはこのようなコードであったとすると… 入力値に数字以外の日本語を入れると、なぜか結果は『低め』になります。 理由はintval()の関数の仕様が数値変換失敗時は 0を返すという理由です。 ですので、全角や数値以外の場合は変換失敗として0が返されるので}elseif($shincho < 165)に該当してしまって低めと間違った結果を表示してしまいます。 この場合は数値以外をJSで入力できなくしてあげたり、php側で数値かどうかのチェックを入れて数値以外ならエラーを出力するなどの対策を考える必要があります。 上記のように、無効同値クラスを考えただけでも2つの想定外になる要素を排除する事ができます。 同値分割は、グループわけをして代表的な値を入力して正しく期待結果が返る事を確認するテストになります。 テスト作成時には、異なる結果が得られる分岐がある場合はこの同値分割を意識する必要があります。 ちと長くなりましたが…本日はもう1つだけ。 限界値分析に関してです。 ◆限界値分析とは 入力を同じように扱えるグループに値を分け、その境界となる値を用いてテストを行う。プログラムのエラーは分岐の境界で発生する場合が多いため、限界値分析に基づいたテストを行うことで、同値分割に基づいたテストよりも多くの欠陥を発見することができる。(ソフトウェアテストwikiより) →要約すると『同じように扱えるグループの境目の値をテストする』って事です。 文書見ただけでもわかりますが、異なる結果を出力する境目になりますので、上記例を使って限界値テストを実施する場合は 身長の入力:期待される結果 -1:正しい値を入力してくださいが表示される事 0:低めが表示されること 164:低めが表示されること 165:標準が表示されること 179:標準が表示されること 180:高めが表示されること このような項目になりますね。 -1~0の間(エラーから低め)、164~165の間(低めから標準)、179~180(標準から高め) の間で1つの数値上昇に対して結果が変わるので、そこをテストします。 境界値テストを実施することで、165未満の判定が }elseif($shincho < 165){が正しいところを }elseif($shincho <= 165){となっていた場合には、165で『低め』が誤って表示されるのでバグを発見することができます。 境界近くの値は上のif分の記述ミス等のようなバグが発生しやすいです。 実際、ni-yoが所属しているチームでつい最近も境界線の値の判断ミスでバグが発生しました。 ブラックボックステストを作成時に同値分割/限界値分析を意識するだけで、何も意識していない状態よりはかなり品質は変わってきます。 長くなりましたので、ホワイトボックスはまた後日にでも! では( ´ ▽ ` )ノ