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

お問い合わせ
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で記述していったらいつか良さに気づく日もくるんじゃないでしょうか。ではまた!
  • テクログ

    オフィスが急に落ちる現象が多発するPCがある。

    windows7 64bitメモリ 16GBオフィス2013home&business最近変えたPCで以前使っていたPCで作ったエクセルファイルを開いて作業すると突然落ちてします。作業内容は、 ・セルに書き込む ・セルをコピーする上記を行うとすぐに落ちてしまう。VBAは使っていないし、プラグインも入れていない。エクセルの入れなおしも検討したが、以前のPCでも同じような現象が確認されたと聞いたので他の処理を優先することに。調べた結果、「マルチスレッドを無効にする」という記事を試したがあまり効果がない様子。新しいPCで新規にエクセルファイルを作り問題の作業をしてみたが、エラーは確認されなかった。上記のテストの結果エクセルファイル自体に問題がある可能性が高いと思い、エクセルをセーフモードで起動し新しいエクセルに全てのデータをコピーした。セルをコピーするとエラーが発生する為エクセルのセーフモードは必須。新しいエクセルでの作業を1週間程度使用してもらったが、今のところ現象の再発はない。かならずしも上記の作業で直るとは限らないが、困ったときはエクセルファイルを作り直してみては?
  • テクログ

    基本中の基本のif文で知らなかったこと

    はじめまして!今年4月入社のkaiです。入社してから早3ヶ月、といっても研修で2ヶ月いなかったのでまだまだ慣れないことがたくさんありますが、徐々にそれが出来ていくのが楽しくもありますよね。さて、今回は研修の主軸にあったPHPに関して最近気になって調べたことを書いていこうと思います。私は元々CやJavaでプログラムを書いていたのですが、新たにPHPの学習を進めていく中で、if文に微妙な違いがあることに気づきました。C言語などでif文を記載するときは、のように記述しますが、PHPでは、のように記述します。当初よく考えないでC言語の記述方法で記述していたのですが、動作上には何の問題もなく、ふと参考書を見返してこのことに気づきました。(危なかった…)どういうことだろうと調べてみると、PHPの`elseif`はPHP側で用意された式で`else if`と記述するのとは文法的な意味はやや異なるものの最終的な結果は同じになるようです。後者の`else if`は、if文やfor文で処理が一つのみの時に波括弧を省略できることを利用した記述方法でした。この`else if`を別の書き方をすると、のようになります。ちなみにC言語などもこの仕様だったようで驚きました!ただ、この`else if`は、PHPで利用できる波括弧を「:」で置き換える記述には利用できないので注意が必要です。いかがだったでしょうか。個人的にはPHPのみならずC言語にも`else if`という式が用意されていなかったということが衝撃でした!役に立つかと言われれば微妙な気もしますが、これからも色々と調べていきたいと思います!・参考リンクPHPマニュアル - elseif/else if
  • テクログ

    コスト配分タグを自動でチェックしたい!

    恒例のしたいシリーズです。いまつくりました。●なにがしたいの?AWSアカウント内に複数の媒体があって、どの媒体にどれだけお金がかかっているかをチェックするために、リソースにProjectタグをつけると簡単に集計できます。でも、リソースは随時増えるし、ちゃんとProjectタグついているのかわからない。なんとかしたいという気持ち。●どうやるの?LambdaでリソースにProjectタグがついているかをチェック。+Projectタグの値もチェック(ちがうのがついてたらこまるからね)チェックしない、というのも設定したい。あと、結果はSlackに通知したりしたい。●具体的には?ソースをはりますんで見てね!EC2のタグチェックの例です。サンプルですよ。・追加ライブラリslackwebいれてください。・使っている環境変数ACCOUNT_NAME AWSアカウントの名前とかをいれます。通知用です。CHECK_TAG_NAME チェックしたいタグをいれます。今回はProjectです。CHECK_TAG_VALUES カンマ区切りで、入っていていほしいタグの値をいれます。aaa.jp,bbb.jp  みたいなのですSLACK_URL SlackのWebhookURLです。・ソース(Pythonらしさはかけらもありませんがゆるしてください# -*- coding: utf-8 -*- # EC2のタグ設定チェック import boto3 import os import slackweb import sys # アカウント名 ACCOUNT_NAME   = os.environ['ACCOUNT_NAME'] # チェックするタグ名 CHECK_TAG_NAME  = os.environ['CHECK_TAG_NAME'] # ついていてほしいタグの内容(どれかならOK) CHECK_TAG_VALUES = os.environ['CHECK_TAG_VALUES'].split(",") #slackurl SLACK_URL    = os.environ['SLACK_URL'] REGION_NAME = 'ap-northeast-1' ##################################################### #本体 ##################################################### def lambda_handler(event, context):   #タグチェック   results = checkTags()   print('checkTags results:')   print(results)   checkResult_AND_Notify(results) ##################################################### # インスタンスID一覧を取得 ##################################################### def checkTags():   instance_list = []   #ページャーで全て取得   client  = boto3.client('ec2', region_name=REGION_NAME)   paginator = client.get_paginator('describe_instances')   # Filterで止まっているものは除外   page_iterator = paginator.paginate(     Filters=[     {       'Name': 'instance-state-name',       'Values': [         'running',       ]     }   ],)   #チェックしていく   for page in page_iterator:     for reservation in page["Reservations"]:       for instance in reservation["Instances"]:         instance_id = instance["InstanceId"]         #Tagsを見て、CheckProjectSettingがNOならば除外(存在しない、またはYESなら追加         check_flag       = True         project_tag_exist_flag = False         project_tag_value   = ""         name_tag_value     = ""         Tags = instance["Tags"]         for tag in Tags:           if tag['Key'] == 'CheckProjectSetting':             if tag['Value'] == 'NO':               print('CheckProjectSetting,NO:' + instance_id)               check_flag = False           if tag['Key'] == 'Project':             project_tag_exist_flag = True             project_tag_value = tag['Value']             print('Project tag_value:' + project_tag_value)           #Nameはわかりやすさのため取ります           if tag['Key'] == 'Name':             name_tag_value = tag['Value']             print('Project tag_value:' + name_tag_value)         if check_flag == True:           print('CheckProjectSetting,YES:' + instance_id)           if project_tag_exist_flag == False:             #タグ自体がない場合は即追加             instance_id_dict = {               "instance_id"    : instance_id,               "name_tag_value"  : name_tag_value,               "project_tag_value" : project_tag_value,               "reason"      : "no_project_tag"             }             instance_list.append(instance_id_dict)           else:             #タグはあった場合、中身を確認し、なかったら一覧追加             if project_tag_value not in CHECK_TAG_VALUES:               instance_id_dict = {                 "instance_id"    : instance_id,                 "name_tag_value"  : name_tag_value,                 "project_tag_value" : project_tag_value,                 "reason"      : "project_tag_not_match"               }               instance_list.append(instance_id_dict)   return instance_list ##################################################### # 漏れがあるものを通知 ##################################################### def checkResult_AND_Notify(results):   print('checkResult_AND_Notify')   exist_no_Tag_Flag = False   res_str = ''   for result in results:     exist_no_Tag_Flag = True     res_str += '&gt;  Name:' + result['name_tag_value'] + ' ID:' + result['instance_id'] + ' 理由:' + result['reason'] +'\n'   if exist_no_Tag_Flag:     title_str = "ProjectタグをつけてないEC2インスタンスがあったよ!付けてね!\n"     slack = slackweb.Slack(url=SLACK_URL)     slack.notify(text=ACCOUNT_NAME + "のProjectタグチェックをしたよ!\n\n" + title_str + res_str)   else:     print("ProjectタグをつけてないEC2インスタンスはなかったよ!") ※Tagsを見て、CheckProjectSettingがNOならば除外やったね!もうタグがあるかどうかをチェックしなくていいよ!肝心のタグ設定は場合によりますので、手動で付けてくださいね。以上!(見栄え用の画像↓)
  • テクログ

    料理の写真を美味しそうに補正するコツ

    こんにちは。頑張ったコーポレートサイトが無事リニューアルできて嬉しいデザイナーのキャンベルです。よろしくお願いいたします。今回は、料理の写真を美味しそうに補正するテクニックについて書いてみます。コチラが元画像。牛フィレ肉のコトレッタ(カツレツ)赤ワインのソース。昨年のクリスマスディナーのコースの中の一品です。サンタが来ない大人クリスマスの楽しみといえばプロの料理を堪能することがメインになってしまいますね。さて、この写真をもっと美味しそうに見えるように補正してみましょう♪まず、料理の写真で大事なのが明度と彩度です。料理は見ただけで「わ~美味しそう!」と思わせたもの勝ちだと思うので美しく見える明るさと鮮やかさに整えてあげます。レベル補正で少し明るくしました。若干、トマトの色がわざとらしい赤になってしまった感があるので、気持ち彩度を下げて自然な色に修正。次に、被写体のメインがどこにあるか、というのを考えます。料理や細かいものの写真は、最も見せたい部分をクリアに描写してその他のエリアはボカすと、とても雰囲気が良くなります。この料理の最も見せたい部分は…このへん!(赤でない部分)このクリアに見せたい部分にシャープをかけ、逆に見せなくて良い奥の部分をボカシます。すると、こんな感じでグッと奥行きのある写真に。ルッコラの葉がシャキッと見えるようになり、カツレツの衣がサックサクな感じを意識してあげると、質感が際立ってイイ感じになるんです。あとは、ルッコラの葉の彩度を少しだけ上げて新鮮さをアピールし…全体的に温かみのあるトーンに整えて完成です!比較してみると、差がおわかりいただけるかと思います。ウソをつくのではなく、より被写体の魅力を引き出すのが写真補正です。最近は補正に関してはアプリで簡単になかなかのクオリティーで出来てしまいますし、デザイナー泣かせの便利な世の中になりましたがなんだかんだで写真の良し悪しを決定付けるのは構図だったりします。構図については、きっちりとした正解理論があるにはありますが、写真を撮る一瞬でそれを判断してフレームに収めるには、理論だけではない感覚とセンスが必要になります。これを鍛えるには、とにかく良い作品を見まくること。脳みそと視覚に焼き付けていくと、バランス感覚が鍛えられていく気がします。スマホのカメラが優秀なせいで、すっかり出番をなくしてインテリアの一部と化している、重くて嵩張るデジ一眼を横目に見ながらたまには一緒にフラッと出かけてのんびり撮影したいなぁと思ったりする今日この頃でした。
  • テクログ

    円形のプログレスバーを作成する [After Effects]

    最近制作したモーショングラフィックスで詰まったところがあったのでこの場を借りて知識を共有できたらと思います。やりたかったこと直線のバーではなく円形のプログレスバータイムラインに合わせて色付きのゲージを回転させたいゲージに合わせて真ん中の数字も動かしたい下2つがわからず詰まった。1.楕円形のシェイプを追加します。塗りは無しで線のみ。色は後で変えるので何色でもいいです。シェイプの下に平面をおいていますが、これはお好みで構いません。2.同様のシェイプレイヤーで一回り小さい楕円形パスを追加します。線のプロパティで破線を追加します。数値はお好みで。シェイプに塗りのエフェクトを適用してグレーに設定します。これがバーの下地になります。3.シェイプレイヤーを複製します。これが動きをつけるレイヤーになります。塗りのエフェクトは削除してとりあえずグラデーションを適用してデザインしておきます。4.ヌルオブジェクトを追加して、エフェクトのエクスプレッション制御からスライダー制御を適用します。スライダーをバーを動かしたい始点と終点にキーフレームを打っておきます。複製したシェイプレイヤーにパスのトリミングを追加します。終了点のエクスプレッションピックウィップをヌルオブジェクトのスライダー制御にドラッグしましょう。エクスプレッションが自動で入力されます。これでスライダーのキーフレームとシェイプの動きが同期します!プレビューするとバーが動くかと思います。とりあえずバーだけ出したい場合は上記で完成です。折角なのでバーの動きに合わせてパーセンテージも表示したいぜ!という場合は以下に…テキストレイヤーを配置します。テキストは円の中心に置きます。ソーステキストに下記のエクスプレッションを入力しますbeginCount =thisComp.layer("null").effect("スライダー制御")("スライダー"); stopCount = thisComp.layer("null").effect("スライダー制御")("スライダー"); beginTime = 0; countDur = 5; Math.round(linear(time,beginTime,beginTime + countDur,beginCount,stopCount)) + "%" beginCountとstopCountに先程のヌルオブジェクトのスライダープロパティを代入しています。beginTimeは名前の通り開始時間countDurはカウントする時間でこの場合5秒間ですlinear()のパラメータはlinear ( 変数(今回はコンポジションの時間) , 入力最小値 , 入力最大値 , minに対する出力値 , maxに対する出力値 ) ですので、スライダー制御の値に合わせて'%'がお尻についた1~100の数字が出力されるようになります。フォント、色、あとはスライダーのイーズをお好みで設定してみてください。完成形SVGにすればWebサイトやアプリとかでも使えるかな?こんな記事書いてますがデザイナーでもないので実務では一切触ってません。コアテックは映像案件があるわけではないのであしからず。。