開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

This time I would like to share about export a file as CSV format using Javascript HandSonTable. HandSonTable works with many of most popular languages like : React, Angualr, Vue and Javascript.

Then what is HandSonTable? HandSonTable is like data grid spreadsheet designed to hundreds of thousands of cells. HandSonTable is performed with so much features ex: search, sort, filter without delays. Let’s start!

Firstly, we need to do is to import handsontable.full.min.js and handsontable.full.min.css in html. After importing, we can now use HandSonTable. To display HandSonTable, we need to add a new div with id or class name attribute.

Import JS and Css file in header

<script src="https://cdn.jsdelivr.net/npm/handsontable@10.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@10.0/dist/handsontable.full.min.css" /> 

Add new div and download button for export CSV format

<div id="example1"></div>
<div class="controls">
  <button id="export-file">Download CSV</button>
</div>

Let’s start JS code!

For use HandSonTable, we must call that two attributes roughly first one is what place we want to append data so we will call our Id named with example1, and second one is how much data display with rows and cols and what kind of data display.

Then to call our id and button using javascript querySelector.

const container = document.querySelector('#example1');
const button = document.querySelector('#export-file');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(7, 7),
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

To export a file, we can use tabename.getPlugin(‘exportFile’);

After button click action is done, for download the file we can use javascript addEventListener with click property. For downloadFile and fileExtension must be ‘csv’ and fill your desire filename.

button.addEventListener('click', () => {
  exportPlugin.downloadFile('csv', {
    bom: false,
    columnDelimiter: ',',
    columnHeaders: false,
    exportHiddenColumns: true,
    exportHiddenRows: true,
    fileExtension: 'csv',
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
    mimeType: 'text/csv',
    rowDelimiter: '\r\n',
    rowHeaders: true
  });
});

Hoped you enjoyed reading this!

By Ami

Tweet

HTC社が新VRヘッドセット「Vive Flow」を発表しました。

https://www.vive.com/us/product/vive-flow/overview/

スタンドアロン型VRヘッドセットとしてはFacebook社の「Oculus Quest 2」が性能やコストパフォーマンスの点で非常に優れており、市場のデファクト・スタンダードのようになっています。
Vive FlowをOculus Quest 2と比較した場合、残念ながら全体的にはOculus Quest 2のほうが優秀な点が多いです。
とはいえVive FlowにはOculus Quest 2にない利点もありますので、
今回はその点を紹介したいと思います。

重さ

VRヘッドセットは頭につけて使用するものなので、軽ければ軽いほど首への負担は少なく快適です。
Vive Flowの重さは189gです。Oculus Quest 2の503gと比べて圧倒的に軽量です。
ただVive Flowは外部バッテリーに接続して使用することが前提となっており、Oculus Quest 2のように本体にバッテリーは内蔵されていません。

度数調整

視力が悪い人限定ですが、Vive Flowには度数調整機能があり、眼鏡なしで使用できます。
Oculus Quest 2では眼鏡をかけてその上からヘッドセットを装着するので、
眼鏡の大きさによってはヘッドセットが窮屈になったり、取り外しが簡単におこなえないなどの不便な点がありました。視力が悪い人にとってはその辺りが解消されるのは大きな利点といえそうです。

装着方法

従来のVRヘッドセットは「かぶる」装着方法でしたが、Vive Flowは眼鏡の形状に近く、「かぶる」というより「かける」という表現がぴったりくるような装着方法になっています。
BeatSaberのような体を激しく動かすゲームではズレないか心配ですが、
気軽に装着するという点では優れていそうです。

木曜日担当：nishida

Tweet

When we develope websites or mobile apps, one of the important facts we need to think is performance. For example, if the website is using too many images, we need to use cloud storage like S3. Sometimes we need to use cache for better performance.

But when we need to update our code and test again, we have to clear the browser cache to see the changes. Browser cache is cleared by the browser setting. I think it is a little busy for developers. So today I want to share useful chrome extension to clear browser cache.

Clear Cache is a useful chrome extension. Install the extension and select the small recycle icon in your browser to clear the browser cache. There are no confirmations and no extra dialogs to contend with. For easy usage, you can pin in your Chrome browser.

by tsuki

Tweet

10月26日からmacOS Montereyの配信が開始されました。

FacetimeにWindowsから参加できるようになったり、
写真内のテキストを抽出したり、さらにそのテキストを翻訳できるようになったようです。

私が気になっているのは
Object Capture
というものでコレは複数枚の連続した画像から3Dオブジェクトをつくれるという機能のようです。

追加された機能のうちいくつかはApple Siliconを搭載したmacでのみ利用でき、
Intel CPUを搭載したMacでは利用できないようです。

macとiPadの間をシームレスに操作できるユニバーサルコントロール機能は、
リリース時には含まれず、秋ごろのアップデートで追加されるそうです。

水曜担当：Tanaka

Tweet

Today I would like to share about a laravel package that I wrote recently. That package is to translate languages easily using a translation API. I had to use a translation api in my project. Then I wanted to write short code for translation feature and reuse it for future. So I created this package locally.

Methods that can be used

After creating Translation Object,　you can use the following methods.

$obj = new Translate();

Translation

$translated_text = $obj->translate('Hello World", 'EN', 'JA'); 

echo $translated_text;

Getting supported languages

$languages = $obj->languages();

foreach($languages as $lang){
    echo $lang['language']."-".$lang['name'].'<br>';
}

Getting supported source–languages

$source_languages = $obj->languages('source');

foreach($source_languages as $lang){
    echo $lang['language']."-".$lang['name'].'<br>';
}

Getting supported target–languages

$target_languages = $obj->languages('target');

foreach($target_languages as $lang){
    echo $lang['language']."-".$lang['name'].'<br>';
}

You can monitor your usage of translation API

$usage= $obj->usage();

echo $usage['character_count'].' characters have been used. Maximum number of characters that can be translated in the current billing period are '.$usage['character_limit'];

You can setup a timeout in requesting api

$obj->setTimeout(10);

Hope you enjoyed that.

By Asahi

Tweet