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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    超便利なツール「Magnet」って知っていますか?

    初めまして!11月からコアテックに入社しました、りょうたです。今回はMacの使い勝手をよくする Magnet というツールを紹介させてください!パソコンで作業している時、複数の画面を同時に開いて作業したい時ってありませんか?僕はエディタとブラウザを同時に開いて作業することが多いです。そういう時、みなさんはどうしていますか?えっ、手動で画面表示サイズを調整しているんですか!!それ、めっちゃくちゃ面倒じゃないですか、、僕も最初はそうしてたんですよ。でも頻繁に画面を切り替えたり見比べるので、それはもう骨が折れすぎて粉々になるくらい面倒な作業でした。一応Macには標準で画面分割する機能があるのですが、これが使いづらい、、そんな悩みを解決するのが、このMagnetというツールなんです!!ショートカットキーで画面を簡単に分割できるんですよ。例えば、controll・option・←または→ で左右分割、controll・option・↑または↓ で上下分割、controll・option・U, I, J, K でそれぞ左上・右上・左下・右下に4分の1分割といった具合にやることで、左右に分割:左上・右上・下に分割:こんな感じに一瞬で分割してくれます。一つの画面だけを全体表示にしたければ、controll・option・Enter 同時押しです。難点は、、、有料(500円)です(泣)でも僕は10秒使って思いましたね、「ああ、元とったわ」って。作業効率が上がること間違いなしなので、是非試してみてください!探すのが面倒な方はこちらからどうぞhttps://apps.apple.com/jp/app/magnet-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88/id441258766?mt=12

  • テクログ

    ターミナルって意外と便利だよって話

    挨拶初めまして!昨年にコアテックへ参加しましたとみーです! どうぞよろしくお願いします!!お正月は某惑星フロンティアでチャンピオンになるべく戦ってたり、某宇宙世紀ロボに乗り、傭兵となって戦う○○オペレーション2をやってたりしてました!それで終わりにするには色々とアレだろと思いましたので、一つ技術っぽいことでも書かせてもらおうと思います。ターミナルコマンドを話す前の前置き(読み飛ばし可)みなさん、ターミナルって知ってますか!?macに初期から設置されているCLIツールです!!より詳しい説明とかは「ターミナル mac」 とかでググれば沢山でてきますので省略します!windowsではコマンドプロンプトってやつが同じようなツールになりますが叩く事が出来るコマンドは色々と違います。 今回はターミナルコマンドを書かせて貰います。突然ですが、こんな出来事に出会ったことありませんか!?例えば、とあるWebで野菜を販売している八百屋さんのお話です。「りんご」や「キャベツ」など、様々な野菜や果物を売っておりましたが、今度新しく「青森県産のりんご」や「群馬県産のキャベツ」など、特別な産地を追加するとのこと!お客さんに見せる画像データも、特別美味しそうに見える別の物にしたいと言う話です!画像の新規追加や差し替えはとみーの仕事です!画像を受け取ったら早速やりましょう!お、やってきたやってきた!これが新しい画像たちが入ってるディレクトリ(フォルダ)ですね!!!カチカチッ(ダブルクリック)00001.jpg00002.jpg00003.jpg以下10000件以上の画像…うわあああぁぁぁぁぁぁ!?!!?「青森県産のりんご」や「群馬県産のキャベツ」の画像がどれか、わからないのである早速、八百屋さんにお問い合わせ。八百屋さんもすぐに対応してくれて、対応表を送ってくれました! やったね!!00001.jpg 青森県産のりんご00002.jpg 群馬県産のキャベツ00003.jpg 普通のりんご以下10000件以上の画像…なるほど、これでどれが何の画像なのか、わかるようになりました!あとは、このまま表示させちゃえばおしまいです!!「青森県産のりんご」は「00001.jpg」の画像を表示させてー。「群馬県産のキャベツ」は「00002.jpg」の画像を表示させてー……よしっ!(某指差し猫感先輩に怒られました。。。番号だけじゃわからない。 突然、まったく知らない「千葉県産のほうれん草」画像を差し替えて欲しいって言われたらどうするの?とのことおっしゃるとおり! それじゃ、この画像たちの名前を変えましょうか! うん!!……うん? この1万件以上の画像を……?ターミナルコマンドさぁ前置きが長くなりましたが、ここからが本番です。この1万件以上の画像名、それっぽいものに変えましょうという作業です。手元にあるのは以下のデータです。1万件以上の画像データ「〇〇の〇〇」という文字列 さて、それではターミナルコマンドの時間です。※注意ターミナルコマンドで今回書く内容「ファイル名変更」は基本的には不可逆です。元に戻すのは難しいです。失敗しても良いように必ずバックアップを取ったり、みんながアクセスする環境で何かを作ったり、移動させるコマンドを叩くのは出来る限りやめましょう。1.「青森県産のりんご」のような文字列だけを抜き取ります$ grep '.*の.*' 画像データリストのファイル > ○○の〇〇.txt 2.抜き取った「〇〇(都道府県や[普通])の」と「の〇〇(野菜や果物)」の全ての種類を洗い出す$ cat ○○の〇〇.txt | sed -e 's/の.*//g' |  sort -u > 都道府県や普通.txt $ cat ○○の〇〇.txt | sed -e 's/.*の//g' |  sort -u > 野菜や果物.txt 3.抜き取ったデータを元に、変換後の文字列名をつくりますここは手作業です。 「青森県産」→「aomori_」「りんご」→「apple」などに変換する対応表を作ります4.都道府県などの対応表を元にして、コマンドを叩き続けます(都道府県の関係上、どんなに最低でも47回を超えます)$ sed -e 's/青森県産の/aomori_/g' 画像データリストのファイル > 画像データリストのファイル_new $ sed -e 's/群馬県産の/gunma_/g' 画像データリストのファイル_new > 画像データリストのファイル_new … 5.野菜も同様に、[.jpg]という文字列を追加してコマンドを叩き続けます(全種類分、叩きます)$ sed -e 's/りんご/apple.jpg/g' 画像データリストのファイル_new > 画像データリストのファイル_new … 6.「画像データリストのファイル_new」を使って、画像データの名前を変換$ cat 画像データリストのファイル_new | xargs -I % mv % 以上!これで「00001.jpg」という「青森県産のりんご」の画像名を「aomori_apple.jpg」に変換する、という作業を1万件以上の画像にそれぞれ対応出来たはずです!(遥か大昔の案件を参考に身元が割れないよう改変して書いてるので、 コマンドが汚いとかいう意見があったり細かいところでミスが出る 可能性があるかもしれません。 何かしらの形で聞いてくれたら答えたいです)いや、待って。 都道府県とかで最低47回以上コマンド叩くの、面倒くさくない?4、5番の対応表を元にする手作業の部分ですね!? わかります!!似たようなコマンドをバシバシ叩くことでミスが出ますし、ここは直すべきですね!しかし、とみーが知ってるターミナルのコマンドは、引数は一つまで!つまり、とみー流のターミナルのコマンドじゃ対応できません!!なので、今度はシェルの話をしましょうか(次の機会があればです)ここまで長文を読んで頂いた皆様方、ありがとうございます!それでは〜

  • テクログ

    Chatwrok API でダイレクトチャットに通知を送る方法

    要点Chatwrok API でダイレクトチャットに特殊な通知をしたい場合は、https://api.chatwork.com/v2/contacts でコンタクト一覧が手に入るので、そこにある該当アカウントの room_id にメッセージを送ります。背景アカウント作成を ChatOps でやりたいパスワードも自動発行して、発行コマンドを叩いたユーザーにだけ通知させたいたったこれだけです。これだけですが、正式名称であるダイレクトチャットで探しても出ない出ない。「Chatwork API ダイレクトチャット」などで Google 検索しても、「結局どうするの?」状態です。私の探し方が悪いのかもしれませんが、このままだと癪なので、自分で方法を書くことにしました。ダイレクトチャットへの送信方法1. ダイレクトチャット用の部屋番号を取得まずダイレクトチャット用の部屋番号を取得します。というよりも、ここができたら後は幾らでもネット上に情報があります。以下、 curl での実行例です。 curl -H "X-ChatWorkToken: APIトークン" "https://api.chatwork.com/v2/contacts" この結果、以下のような JSON がレスポンスとして返ってきます。[  {   "account_id": 000000,   "room_id": 000000000,   "name": "チャットワーク",   "chatwork_id": "chatwork",   "organization_id": 000000,   "organization_name": "チャットワーク",   "department": "",   "avatar_image_url": "https://appdata.chatwork.com/avatar/ico_avatar_notfound.png"  }, . . . ] ダイレクトチャットを送りたいアカウントのID と同じ account_id でフィルタリングを行い、room_id を取得します。jq で取得するならこうです。 curl -H "X-ChatWorkToken: APIトークン" "https://api.chatwork.com/v2/contacts" | jq '.[] | select(.account_id==ダイレクトチャットを送りたいアカウントのID)' | jq '.room_id' 2回パイプ噛ませる必要はない気もしますが、jq で複雑な条件のフィルタリングをしようとするとやり方を忘れるので、こうしています。2. ダイレクトチャットを送信する上で取得した部屋番号に送るだけです。それ以外は通常の使い方のままです。 まとめChatwrok API でダイレクトチャットに特殊な通知をしたい場合は、https://api.chatwork.com/v2/contacts でコンタクト一覧が手に入るので、そこにある該当アカウントの room_id にメッセージを送る!

  • テクログ

    Atomic Designへの導入

    コンポーネント指向Vue であろうと React であろうと、コンポーネント指向という開発手段が主流になっています。コンポーネント指向とは一つの様々な機能やデザインからなるサイトが、同じ機能もしくはデザインの部分を一つの部品とし、それらの部品を組み立てることによって構成される開発のことです。バックエンドではオブジェクト指向が主流だと思いますが、フロントエンドだと見た目から直感的に切り分けやすいコンポーネント指向が開発の効率を大幅に上げることが可能です。Atomic Designその中で、コンポーネント指向の一つの設計方法として Atomic Design が上げられます。Atomic Design は UI の要素を原子(Atoms)分子(molecules)有機体(organisms)テンプレート(Templates)ページ(Pages)の5つの階層に分け、最終的なUIとUIの基礎となるものを同時に作成する設計方法で、アメリカのWebデザイナーブラッド・フロスト氏によって提唱されました。イメージとして以下の図がわかりやすいと思います。(出典:https://qiita.com/croco_works/items/e34d1b0c0e50b37031d7)ここで一つの疑問が思い浮かぶと思います。それぞれどの粒度が atoms、molecules、organisms、templates、pages になるのか?粒度の決め方実際には Atomic Design のそれぞれの階層の粒度に関して明確な定義があるわけではない。言い換えれば、これから進めるプロジェクトの粒度は自分もしくはチーム自身で決めることができます。ゆえに、Atomic Design で開発を進めるときは最初の段階でデザイナーとプログラマーが一緒に話し合って、お互いの納得のいくような階層の粒度にして設計書を作るのが最も効率的である。とはいえ、指標がないとなかなか決めるのも難しいですので、僕からそれぞれの階層の定義をここで提示して、粒度決めに役立てればいいなっと思っています。こちらはあくまでも自分がネットで情報を収集して、自分で考えて定義したものなので、一つの考え方として受け止めてください。原子(Atoms)       それ以上UIとしての機能性を破壊しない最小要素分子(molecules)     複数の atoms が一緒になり最小限の機能を構成するグループ有機体(organisms)    インターフェイス上明確な区分を形成するために複数の molecules が集まったグループテンプレート(Templates) データを流し込む前の organisms から構成されるサイトの枠組みページ(Pages)      templatesにデータを流し込んだサイトの完成品

  • 画像:ブログサムネイル

    テクログ

    クリッピー使ってますか?辞書登録つかってますか?

    おはようございます!今日はタイピングの手間を省いてくれる便利なツール・機能を紹介します!ご存知の方が多いと思いますが、こちらのクリッピーになります!https://clipy.softonic.jp/mac?ex=BB-1549.0コピーした内容を30個ほど記憶してくれてMac ですと shift + command + v で呼び出せます!何回もページを移動してコピーして、移動してペーストして、などの手間が省けるので非常に便利です!あとPCに元々内蔵されている辞書登録もタイピングの手間を省いてくれるのでよく使っています!以下の『キーボード』の中の『ユーザー辞書』の中で設定できます!『お手数ですがご確認いただけないでしょうか。宜しくお願いいたします。』などの会社でよく使う文章ありますよね?これは『おて』で登録しているのですぐ出てきます!とても便利です!『2』と叩けば『var_dump($data);exit;』が、『あど』と叩けば『{自分のメールアドレス}』が出るのでイチイチ手打ちする必要がなくなります!その他もたくさん登録しています!みなさんも是非活用してみてください(^O^)

  • テクログ

    画像認識システムを作ってみた

    お久しぶりです。JGです。夏頃に突然、画像認識システムを作りたいと思い、実際に作ってみました。画像認識システムは難しい、機械学習なのでPythonで作成するイメージがありました。しかし、調べたところGoogleのCloud Vision Apiを使えば、様々な言語(PHP,Python,Ruby)等で、簡単に実現できることがわかりました。こちらのApiの料金ですが、登録してから3カ月は無料で使えます。下記のURLの手順を参考に、環境を構築し、サンプルコードを参考にすれば、okです。https://cloud.google.com/vision/docs/quickstart-client-libraries?hl=ja#client-libraries-install-php但し、APIの戻り値が英語なので、日本語にするためにはクライアント ライブラリをインストールする際に、下記を追加する必要があります。composer require google/cloud-vision composer require google/cloud-translate //これを追加 下記ソースの$file_nameに認識したい画像のファイル名を指定すれば動くはずです。ちなみに調査から実装完了まで3時間程度でき、画像認識システムが簡単にでき驚きました。興味がある方は、是非試してみてください。<?php   require_once(dirname(__FILE__).'/vendor/autoload.php');   use Google\Cloud\Vision\V1\ImageAnnotatorClient;   use Google\Cloud\Translate\TranslateClient;          $image_annotator = new ImageAnnotatorClient();   $file_name = ''; //認識したい画像を指定   $image = file_get_contents($file_name);   $response = $image_annotator->labelDetection($image);   $labels = $response->getLabelAnnotations();   if ($labels) {     echo("認識成功:" . PHP_EOL);     $translate = new TranslateClient();     foreach ($labels as $label) {           $text =$label->getDescription();               //英語を日本語に変換            $result = $translate->translate($text, [                'target' => 'ja'            ]);            echo ($result['text'] . PHP_EOL);       }   } else {        echo('認識失敗' . PHP_EOL);   }