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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    ブラウザテストフレームワークの5月でした

    ブラウザテストフレームワーク、使ってますか!単体テストもいいけど、やっぱりユーザが使って実際ちゃんと動作してるの?ってのが気になりますよね。最近はjsでいろいろやることも多いし、関連するところが動かなくなったり。(jsの単体テストやれって話もありますが)で、有償無償問わず、いろいろと見てみました。結構網羅したり、試したりするだけでもそれなりにかかったので、なんとなく一覧的に。・いわゆるツールでの自動テスト系teststudioRanorexAutifyTestCompleteUnified Functional TestingROBOWAREuipathkatalon studioimacros・いわゆるブラウザテストフレームワーク(E2Eテスト用)Seleniumを直使用CodeceptionCodeceptJSNightwatch.jsWebdriverIOScrapywatirAppiumSelenideGebおよびSpockCapybaraSplinterCasperJSSST (selenium-simple-test)重要視した点としては、パッとつくれて、パッと動かせる。なんだこれ、どうやるんだ、みたいなのはなし。……ということで、有償の自動テストツール系について、可能なものは体験版を入れてちょっと動かしたりしました。「ちょっと」なのはあえてちょっとだけやって、それでもできないのならば簡単じゃない!ということでした。もちろんデモや動画をみてると、「なんかすごいことやってるし、なんでもできそう…」となりますし、実際理解すればなんでもできるのかもしれません。でも少しだけいじっただけでは全く思ったとおりに動かないんですよね。というわけでツール系はなくなり、ブラウザテストフレームワークの検証となりました。テストコード書かないといけない、というのは確かに手軽とはいえないですが、サンプルがあればあとはその改良をつづけていけばなんとかなる、という思惑です。現状のサポート具合、活発さ、書きやすさ…などからCodeceptionCodeceptJSが残り、mac,PCでのブラウザテストはクリア。実機もやりたい、ということでAppium連携をしたり…ということをやっていましたよ。実機動作は結構コツが必要だったり、iPhoneだとやりたいことがどうしてもできない部分があったり…となりましたが、それ以外は結構思ったとおりのテストができましたので、毎回確認しないといけない動作がある、とか、そういった場合には役に立つのではないでしょうか。一個小ネタでいえば、テストをAWS Lambdaに連携させて、外への影響を確認したりする、ということもやってみました。純粋なE2Eテストの範疇からは外れるかとは思いますが、やはりどうしても確認したい内容もありますので、そういうものもいかがでしょう。ちなみに最終的に残ったのはCodeceptJS+Appiumでした!(以下イメージ画像
  • テクログ

    マテリアルデザイン

    こんにちは。じゅんちんです。マテリアルデザインとは、本当に簡単にいいますとGoogle純正アプリケーションのようなUIデザインです。webでアプリのような見た目を簡単に実装できたらいいですよね。Vueでマテリアルデザインを手軽に適応できるVuetifyといったフレームワークがあります。タブ実装に関して困ったことがあったので共有したいと思います。タブの切り替え実装するv-tabといったタグがあるのですが、リファレンスの中では、スライド以外のアニメーションが紹介されていないと思います。フェードで、内容を切り替えたいのに。。。そんな場合はどうするかというと、自作したアニメーションを以下のように適応する必要があります。v-tab-itemにtransition (タブを進めた時のアニメ)reverse-transition (タブを戻した時のアニメ)を記載します。この属性を自作したフェードのアニメーションCSSと紐づく名前しすればフェードで切り替わるようになります。具体的にはタグは以下のような感じになります。my-fadeがcssの紐付けになります。  <v-tab-item   v-for="i in 2"   :id="'tab-' + i"   :key="i"   transition="my-fade"   reverse-transition="my-fade"     >適応するフェードのアニメーションは以下のような感じでできます。v-tab-itemと同じコンポーネントのcssに記載すればOKです。<style scoped>.my-fade-enter-active, .my-fade-leave-active { transition-property: opacity; transition-duration: .25s;}.my-fade-enter-active { transition-delay: .25s;}.my-fade-enter, .my-fade-leave-active { opacity: 0}.my-fade-leave-active{position: absolute;top:0;}</style>
  • テクログ

    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で記述していったらいつか良さに気づく日もくるんじゃないでしょうか。ではまた!