RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

一緒にラクーンのサービスを作りませんか？ 採用情報を詳しく見る

カテゴリ一覧

一緒にラクーンのサービスをつくりませんか？採用情報はこちら

JavaScript

簡単導入Oracle SQLclと手慣れたJSで少し凝ったデータ登録の方法

最近データ移行の仕事をする機会があり、その調査の中で見つけた、Oracle Databaseで手軽に柔軟にデータ登録する方法を紹介したいと思います。 具体的には、Oracle SQL Developerコマンドラインと呼ばれる、Oracle SQLcl（以降、SQLcl）でJavaScriptを利用した方法です。 SQLclは依存関係が少なく比較的導入が簡単で、利用プログラマが多いJavaScri

2022.4.5

簡単！javascriptライブラリとテキストで～図を作成

シーケンス図を書く機会があり、その際に使用した便利なjavascriptライブラリがあったので２つご紹介します。 エクセルやパワーポイント等で図や矢印を綺麗に引くのが苦手な人でも、テキストで書けば綺麗に図を作成できます。 1. js-sequence-diagramsで図を書く js-sequence-diagramsはシーケンス図をテキストで表現できるjavascriptのライブラリです。

2022.2.17

どこでつまずきやすい？？デザイナーにjQueryを教える際の注意点

ここ最近デザイナーや新人さんからjQuery・jsの質問を受けたりヘルプで代わりに作成したりという業務がぽつぽつと出てきました。 直近であった失敗の反省も兼ね、jsを使う機会は少ないけど少しかじってる状態の人にjQueryを教えた時つまずきやすいと感じた点を私なりにまとめたいと思います！ 失敗談 まず実際に社内で起こった失敗事例を紹介します。 とある案件で上の画像のような追従ボタンを実装

2021.4.4

e2eのテスティングフレームワークCypressを導入しました

今回はe2eのテスティングフレームワークであるCypressを導入したので、その導入についてのお話です。 なぜCypressを導入したのか URIHOのお客様に使用していただいている画面はSPAで構築してあります。そのためSPAに対応したe2eのツールが必要になりました。今まではseleniumを使用していたのですが各個人の環境の設定が手間、SPAで使用するとなるとDOMが出現するまで待つとい

2021.3.1

node.jsでエクセルファイルを編集する方法

一般的にエクセルの内容をプログラム的に変化させるにはVBA / マクロを使用すると思いますが、モジュールを活用してjavascriptでエクセルの編集が出来るのは簡単だし便利だなぁと思ったので、今回はnode.jsのpackageのxlsx-populateを使用してエクセルを編集してみました。 この記事ではnode.jsを使用する為、実行環境はnode.js公式からダウンロード・インストールを

2021.1.12

続・Alexaのカスタムスキルを作成してみよう

以前、Alexaのカスタムスキルを作成してみよう でバイオリズムを読み上げる記事を書きました。 今回はその続きで画面付きデバイス向けにグラフを表示させてみたいと思います。前回と同様、実機が無くてもテストまでできます。 Displayインターフェースの有効化 最初に alexa developer console にアクセスしてスキル名（バイオリズム）をクリックします。 次に画面付きのデバイ

2020.4.27

rel=”preload”を極めるために必要な2種類のプリロード機能

本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。 フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。 はじめに まずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。 1つ目はHTMLの仕様として定義されている <link

2019.12.12

超簡単！超軽量！LottieでWebアニメーションが捗る

今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しか

2019.12.5

Vue.jsが採用しているMVVMパターンとは【目的を重点に解説】

弊社で開催した勉強会"速い"Webアプリケーションの作り方でLTを行いましたので、内容をまとめました。テーマはデザインパターンの一つMVVMパターンです。 MVVMパターン 速いウェブアプリケーションについて調べていくと、MVVMパターンというデザインパターンをよく見ます。 代表的なところだと、Vue.jsがMVVMパターンです。 MVVMパターンって何だろうと調べると、このような図で説明

2019.10.4

【Software Design誌コラボ企画】『“速い”Webアプリケーションの作り方』を開催しました！

弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会

2019.10.2

SVGにCSSやJSを組み込んでローディングアニメーションを作成する！

今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） 長所

2019.9.30

運営会社：株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc