Raccoon Tech Blog [株式会社ラクーン 技術戦略部ブログ]

株式会社ラクーン 技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。

JavaScript

Visual Studio CodeでSlackに投稿する拡張機能をDIY

こんにちは。開発チームの阿部です。

前回、VS Codeの拡張機能を作成する記事を書かせて頂きました。
今回はVS Code拡張機能作成の第二弾で、VS Codeの拡張機能+SlackのAPIを使ってメッセージ投稿用の拡張機能を作成したいと思います。VS Codeには既にいくつかSlackの拡張機能が存在していますが、SlackのAPIの事も学びたいと考え今回拡張機能をDIYしようと思いました。
※Slackの詳しい事については下記のリンクを参照してください。
VS Codeはテキストエディタなので、メモやソースコードの内容を共有したい場合にファイルの内容をコピペをして内容を送信する事よりもVS Code上からそのまま共有したい内容を送信できたほうが簡単で手間が省けます。また一時的にソースコードを共有したい場合にソースにシンタックスハイライト(Slackの機能)が付いていると見やすく読み手に親切です。開発に関してもSlackに投稿用のAPIが用意されているのでそれを利用して拡張機能に組み込めば簡単に投稿が出来ます。これらが今回拡張機能DIYをしようと思ったきっかけです。

続きを読む

Visual Studio CodeがRSSリーダになる?VS Codeの拡張機能を作れば作業が捗る

こんにちは。開発チームの阿部です。

プログラムを開発する際に必要となるテキストエディターはSublime Text、Atom、VS Code など、
高性能・高機能を持つものが増えてきました。
今回はその内の1つVS Codeの拡張機能(extension)を使用してRssを取得する機能を作成してみたいと思います。
※記事中盤あたりにRssの取得の具体的な方法を載せています。

またVS Codeの公式ページ・概要をリンクして置きました。
良かったら一度見てみてください。
Visual Studio Code 日本語
Visual Studio Code doc 英語
Visual Studio Code wikipedia

続きを読む

JSでmarkdownからカスタマイズしたHTMLを生成する

開発チームの下田です。

普段仕事をしていて、「めんどくさい」と思ったことはありませんか?
そんなときこそプログラミングの出番です。
「めんどくさい」=単純作業であることが多く、簡単なコードを書くとサクッと解決できる可能性が高いです。

私はたった今、このブログの執筆がめんどうくさいです。
どのように面倒くさいかというと少々古めのCGMを使っているため、次のような問題が起きています。

問題点

  • まともな見栄えにするには、HTMLで記述しなければならない
  • コードを貼り付けるときは、エスケープする必要があり、preタグのclassに"prettyprint"を指定しなければならない
  • 見出しはh2タグ、小見出しはh3タグになっている

解決方法

本来はCGMを乗り換えるべきなのですが、やんごとなき事情により実現できない場合があります。
小手先で解決するために、コンテンツはmarkdownで記述して、このブログに合わせたHTMLを作ることにしました。
JSのライブラリMarkedを使って、生成ページを作成します。

完成したコード

こちらが作成したHTMLのソースコードです。
ポイントを後述します。

続きを読む

Vue.jsで作るSPAデータ更新フォーム


開発チームの井川です。


今度とある案件にて、項目数がとても多いデータ更新画面を作ることになりました。
まだ未定ですが200項目くらいはあるかもしれません。
弊社のサービスの管理画面として社内で利用される予定です。
管理画面なのでデザイナーによるデザイン制作はなく、エンジニアがUIを担当します。
そこで、ユーザにとって使い勝手がよく、開発としても余計な画面遷移がなく、繰り返しのコードが少なくなりそうなSPA(Single Page Application)のデータ更新画面を作ろうと考えました。

続きを読む
記事検索