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

JSpreadsheetを使えば、ExcelライクなUIでWeb上のスプレッドシートを実装できます。
今回は、その中でも重要な 「カラム設定（columns設定）」のポイントをまとめましたのでシェアします。

基本構造

JSpreadsheetでは、各カラムの設定は columnsプロパティで行います。

例）

jspreadsheet(document.getElementById(‘spreadsheet’), {
data: [],
columns: [
{ type: ‘text’, title: ‘Name’, width: 150 },
{ type: ‘numeric’, title: ‘Price’, width: 100 },
{ type: ‘calendar’, title: ‘Date’, width: 120 },
]
});

各カラムはオブジェクトで定義し、
type, title, width などを指定します。

よく使う type

type：text
説明：テキスト入力
主なオプション：readOnly

type：numeric
説明：数値入力
主なオプション：decimal

type：dropdown
説明：プルダウン選択
主なオプション：source, autocomplete

type：calendar
説明：日付入力（カレンダー）
主なオプション：format, type, readonly

type：checkbox
説明：チェックボックス
主なオプション：true, false

カレンダー（type: ‘calendar’）の使い方

JSpreadsheetではカレンダーの挙動を制御できます。

例：年月だけ選択（type: ‘month’）

{
type: ‘calendar’,
title: ‘Invoice Month’,
width: 120,
options: {
type: ‘month’,
format: ‘YYYY/MM’,
}
}

出力例： 2025/10

ポイント
カレンダーが「年月モード」で表示できる。
値は “2025-10-01” のように日付形式で保持される

通常の日付選択（type: ‘calendar’）
{
type: ‘calendar’,
title: ‘Invoice Date’,
width: 120,
options: {
format: ‘YYYY-MM-DD’,
}
}

出力例： 2025-10-15

dropdown（プルダウン選択）の設定例

{
type: ‘dropdown’,
title: ‘Currency’,
width: 100,
source: [‘JPY’, ‘USD’, ‘EUR’],
autocomplete: true,
}

選択候補を sourceに配列で指定します。
DBから取得したリストを渡すことも可能です。

数値カラム（numeric）

{
type: ‘numeric’,
title: ‘Amount’,
width: 100,
decimal: ‘.’, // 小数点区切り
mask: ‘#,##0.00’, // 表示フォーマット
}

出力例： 12,345.67

ポイント
maskで桁区切りや小数点表示を指定できる
decimalで小数点記号（. or ,）を変更可能です。

読み取り専用カラム

{
type: ‘text’,
title: ‘ID’,
width: 80,
readOnly: true,
}

背景がグレーになり、ユーザーは編集できません。

木曜日担当：nishida

Tweet

UUIDs, or Universally Unique Identifiers, are strings of characters used to uniquely identify information in computer systems. They play a crucial role in various applications, from databases to distributed systems. In this blog, we will explore the different versions of UUIDs, each designed for specific use cases and scenarios.

1. UUID Basics

Before delving into the versions, it’s essential to understand the basic structure of a UUID. A UUID is a 128-bit number typically represented as a 32-character hexadecimal string, separated by hyphens into five groups. The uniqueness of UUIDs is achieved by combining timestamps, node information, and random or pseudo-random numbers.

2. UUID Version 1: Time-based UUIDs

UUID version 1 is based on the current timestamp and the unique node (typically a MAC address) to ensure uniqueness. The timestamp component allows sorting and ordering of UUIDs based on their creation time. While effective, the reliance on a timestamp makes it less suitable for scenarios where privacy and security are top priorities.

3. UUID Version 2: DCE Security UUIDs

Version 2 is similar to Version 1 but includes additional information related to the POSIX UID/GID and POSIX timestamps. However, Version 2 is rarely used in practice, and Version 1 is more widely accepted.

4. UUID Version 3 and 5: Name-based UUIDs (MD5 and SHA-1)

These versions are generated by hashing a namespace identifier and a name using MD5 (Version 3) or SHA-1 (Version 5). The resulting hash is then combined with specific bits to form the UUID. While these versions ensure uniqueness within a given namespace, the use of MD5 and SHA-1 has raised security concerns due to vulnerabilities in these hashing algorithms.

5. UUID Version 4: Random UUIDs

Version 4 UUIDs are generated using random or pseudo-random numbers. This version prioritizes randomness over time-based information, making it suitable for scenarios where ordering is less critical, and privacy is a priority. The randomness is achieved through the use of a random number generator.

6. UUID Version 6: Modified Version 1

A newer addition, Version 6 combines the best of both Version 1 and Version 4. It includes timestamp information for ordering and randomness for improved security. This version is designed to address some of the privacy concerns associated with Version 1.

Conclusion

Understanding the different versions of UUIDs is essential for choosing the right type based on the specific requirements of your application. Whether you prioritize time-based ordering, security, or randomness, there’s a UUID version designed to meet your needs. As technology evolves, so do UUID specifications, ensuring that these unique identifiers continue to play a vital role in the ever-expanding digital landscape.

Asahi

Tweet

NodeJSは、オープンソースのクロスプラットフォームツールで、基本的にブラウザ環境の外でJavaScriptが機能するための実行環境を構築するものです。非同期プログラミングを利用する。

基本的に、NodeJsはJavaScriptの機能の範囲を広げます。NodeJsは、コーディング言語とAPI、他の言語、およびいくつかの外部ライブラリとの統合を支援します。

クロスプラットフォームの互換性

NodeJSは、Windows、Unix、Linux、Mac OS X、モバイルプラットフォームなど、複数のプラットフォームに対応しています。正しいパッケージと一緒に、完全に自立した実行ファイルにバンドルすることができます。

V8エンジン

元々Chrome用に開発されたV8エンジンは、現在ではWebアプリ開発の目的に合うように改良されています。V8エンジンは、JavaScriptをC++の助けを借りて一般的な機械語コーディング言語に翻訳できる、最も優れたエンジンの一つです。したがって、V8エンジンは、最終的にサーバーやすべての機械語ベースの製品に役立つ。

シングルスレッド

Node.jsはシングルスレッドで動作します。これは、複数のクライアントからのリクエストを処理できる「シングルスレッド・イベント・ループ・モデル」アーキテクチャをベースにしています。メインのイベントループはシングルスレッドで実行されますが、バックグラウンドでは、イベントループに対応するためにNode APIの入出力操作は非同期（ノンブロッキング設計）であるため、入出力作業は別々のスレッドで実行されます。イベントループは、node.jsがすべてのノンブロッキング処理を実行できるようにするものです。

非同期

Node.jsはデフォルトで非同期です。つまり、ノンブロッキングで動作します。つまり、クライアントがサーバにリクエストすると、1つのスレッドがそのリクエストを処理し、リクエストがデータベースとのやりとりを伴うかどうかをチェックし、リクエストが処理され、サーバからクライアントに応答が返されます。このスレッドは次のリクエストを処理する準備ができています。

高いスケーラビリティ

Node.jsのアプリケーションは、非同期（ノンブロッキング）方式で動作するため、高いスケーラビリティがあります。Node.jsはシングルスレッドで動作し、1つのリクエストが到着すると、その処理を開始し、次のリクエストを処理できるようになります。また、応答が準備されると、それはクライアントに送り返されます。

ノードパッケージマネージャ(NPM)

おなじみ、Nodeパッケージマネージャは、Node JavaScript実行環境用のパッケージマネージャで、Node.jsインストーラの推奨機能です。これは世界最大のオンラインリポジトリです。また、私たちのプロジェクトのローカル依存関係の管理も行っています。

キャッシング

Node.jsは、キャッシュという点でかなり有利です。Node.jsはモジュールのキャッシュをサポートしています。Node.jsのモジュールが初めてリクエストされたとき、アプリケーションのメモリにキャッシュされます。キャッシュにより、アプリケーションはウェブページをより速くロードし、ユーザーに簡単に応答できるようになるので、コードを再実行する必要はありません。

高速データストリーミング

データが異なるストリームとして移動する場合、その処理には多くの時間が消費されます。そこで、NodeJSは、アップロード中のファイルを同時に処理することで、データ処理にかかる時間を短縮します。そのため、NodeJsは全体的にデータや動画のストリーミング速度を速めることができます。

By Tsuki

Tweet

WhatFont

WhatFontは、Webページで使用されているフォントを知りたい開発者のための非常に便利なChrome拡張機能です。高速で効果的で、フォントファミリ、サイズ、太さ、色を識別します。

ColorPick Eyedropper

ColorPick Eyedropperは、あらゆるウェブページから色値を選択することができるシンプルなカラーピッカーツールです。

CSSViewer

CSS Viewerは、ウェブ開発者のためのシンプルで非常に効果的なChrome拡張機能です。その名前が示すように、このアドオンは、マウスがポイントされた場所ならどこでも、与えられたページのCSSプロパティを表示します。小さなポップアップウィンドウが表示され、ポイントされている要素を構成するCSSデータが表示されます。

Lorem Ipsum Generator

lorem ipsum ジェネレーターは、その名の通り、デフォルトのテキストを簡単に素早く作成することができます。デフォルトのテキストを簡単かつ迅速に作成する方法を提供します。プレースホルダーとしてデフォルトのテキストが必要な場合、間違いなく、これは手っ取り早い方法です。

Cookie Remover

このエクステンションは、開発者にとっても最高のエクステンションの1つになるでしょう。それは現在のサイトのためのすべてのクッキーを削除することができます。
壊れたクッキーをクリックすると、現在のサイトのすべてのクッキーが削除されます。

Window Resizer

Window Resizerは、ウェブ開発者向けの非常に便利なChrome拡張機能です。シンプルですが、特にレスポンシブデザインやアプリで作業するときに非常に効果的です。Chromeにインストールすると、作業中の画面を一般的な画面サイズの範囲にリサイズしてくれます。

By Tsuki

Tweet

CSS Design Awards

このサイトは、クリエイティビティ、機能性、ユーザビリティのバランスを特に重視したデザイナーやウェブエージェンシーを表彰するサイトです。

Designspiration

このサイトには、ウェブデザイナーのための素晴らしいデザインがたくさんあります。

Dribbble

Dribbble には、ウェブデザインのほか、アニメーション、ブランディング、イラスト、モバイル、印刷、プロダクトデザイン、タイポグラフィのカテゴリがあります。

 Pinterest

Pinterestでは、Webデザインだけでなく、さまざまな種類のデザインを提供しています。

Instagram

インスタグラムは、あらゆる種類のビジュアルコンテンツを10億人のアクティブユーザーに届けることができるNo.1プラットフォームとなりました。

Codepen

HTML、CSS、JavaScriptのコードエディターで必需品です。”ブラウザにコードを入れる”

CSS NECTAR

CSSnectarでは、トリプルベットされたインスピレーション溢れるウェブサイトを紹介しています。 訪問者は、国、特徴、カテゴリー、カラータグなどのフィルターやタグを使って、サイトを見て回ることができます。

Niice

優れたデザインコンセプトのアイデアを提供するサイトです。

By Tsuki

Tweet