Không khí cuối năm 2024 tràn ngập sự háo hức tại Musashi và Innofly khi chúng tôi cùng nhau tổ chức buổi Year-End Party đặc biệt với chủ đề “Đổi Mới – Bứt Phá”.

Buổi tiệc không chỉ là dịp nhìn lại những thành tựu trong năm qua, mà còn là khoảnh khắc để tất cả các thành viên trong gia đình Musashi và Innofly cùng gắn bó và chia sẻ những kỷ niệm đáng nhớ.

NHỮNG THÀNH TỰU ĐÁNG TỰ HÀO

Trong năm qua, Musashi và Innofly đã gặt hái được nhiều thành tựu nổi bật. Từ việc hoàn thành nhiều dự án quan trọng cho đối tác trong và ngoài nước, đến việc khai phá thành công những công nghệ mới để đáp ứng nhu cầu ngày càng cao của thị trường.

Thành tựu này chính là minh chứng rõ rệt cho sự đoàn kết và nỗ lực bền bỉ của các thành viên trong Công ty.

KHOẢNH KHẮC ĐÁNG NHỚ

Buổi tiệc đã diễn ra trong không khí sôi động và ấm áp, nơi mọi người cùng nhau chia sẻ những khoảnh khắc thật ý nghĩa. Các trò chơi nhóm thú vị giúp gắn kết tinh thần đồng đội, trong khi phần biểu diễn ca hát ngẫu hứng của các thành viên đã mang lại những phút giây vui tươi và đầy cảm xúc.

Điểm nhấn đáng nhớ không thể không nhắc đến chính là khoảnh khắc vinh danh những nhân viên xuất sắc. Giám đốc đã trực tiếp trao giải thưởng và gửi lời cảm ơn chân thành đến các cá nhân có đóng góp nổi bật trong năm qua. Những phần thưởng không chỉ ghi nhận thành quả của họ mà còn khích lệ toàn thể đội ngũ tiếp tục cống hiến trong hành trình phía trước.

HƯỚNG TỚI TƯƠNG LAI: VƯƠN CAO VÀ XA HƠN

TẦM NHÌN TỪ BAN LÃNH ĐẠO

Buổi tiệc Year-End Party không chỉ là dịp để nhìn lại thành quả mà còn là cơ hội để lắng nghe những chia sẻ đầy tâm huyết từ hai vị lãnh đạo cấp cao của Musashi và Innofly. Đại diện từ Musashi đã nhấn mạnh vai trò của đổi mới công nghệ và khát vọng vươn tầm quốc tế, trong khi lãnh đạo từ Innofly tập trung vào việc mở rộng mạng lưới hợp tác chiến lược và phát triển nhân tài.

Những thông điệp mạnh mẽ từ ban lãnh đạo đã truyền cảm hứng và khơi dậy tinh thần quyết tâm trong toàn thể đội ngũ, khẳng định rằng năm 2025 sẽ là thời điểm để cả hai công ty cùng chinh phục những thử thách lớn hơn, khẳng định vị thế trên thị trường.

Buổi Year-End Party là cột mốc để Musashi và Innofly cùng nhìn về tương lai với khát vọng lớn hơn. Những kế hoạch mở rộng thị trường, đổi mới công nghệ và tăng cường hợp tác sẽ là trọng tâm trong năm tới.

Chúng tôi rất tự hào khi được là một phần của gia đình Musashi và Innofly, và chắc chắn rằng bằng tinh thần đoàn kết, quyết tâm, chúng ta sẽ tiếp tục gặt hái những thành công vượt bậc trong những năm tới.

Chúc mừng năm mới 2025!

The post 私たちの年末パーティー2024 first appeared on Innofly.

ピクセルパーフェクトは、デザイン原稿とウェブページがピクセル単位で完全に一致することを目指す手法です。しかし、多種多様なブラウザやデバイスの存在により、その完全な実現は現代では困難となっています。

この問題を解決するための一つの方法として、ChromeやFirefoxのブラウザ拡張機能を活用することがあります。特に「PerfectPixel」は、ブラウザ上で画像を半透明に表示し、それをウェブページのデザインに重ねることができます。これにより、デザイン画像に従ってコーディングを行うことで、高い再現性を持つピクセルパーフェクトなコーディングを可能にします。

経験豊富なコーダーならば、デザイン原稿との微妙なズレを感じ取り、修正することができますが、「PerfectPixel」を使用することで、そのプロセスをより効率的に行うことができます。これにより、ピクセルパーフェクトはコーディング作業の大きな支えとなります。

PerfectPixelのインストール

まず、以下のページから拡張機能をダウンロードします。

その後、chrome://extensionsに移動して拡張機能のリストを表示し、「詳細」を選択します。

次に、指示された設定を有効にします。

最終的に、Chromeの拡張機能である「PerfectPixel」のピンを有効にすると、ツールバーに「PerfectPixel」が常時表示されます。

これで設定が完了し、使用する準備が整いました。

Perfect pixelの使い方

①重ね合わせるためのデザイン画像を書き出す

Figmaを使っているなら、全体を2倍の大きさで出力します。

Macを使っているなら、「2X」で出力します。

下の画面はFigmaの出力画面の例です。

XDの場合は、「ファイル→書き出し→選択したオブジェクト」を選択します。

同様に2xで書き出します。

②書き出したデザインカンプjpegファイルをドラッグ＆ドロップする

「PerfectPixel」アイコンをクリックします。

下記画面の「最初のレイヤーを追加してください」のところに、デザインカンプから書き出したjpegファイルをドラッグ＆ドロップします。

③鍵マークを押してオンにし、倍率が0.5で透明度が50%になっていることを確認する

そうすると、デザインとブラウザの表示が一緒になり、違いが見えるようになります。

Perfect pixelなコーディングのコツ

デザイナーは文字間隔に細かく、一つの文でも一文字ずつ間隔を変えることがよくあります。

 例えば、文字間隔を調整しない場合、「letter-spacing: 0.5px」で完璧なピクセルを達成できますが、一文字ずつ間隔を調整する場合、一度に調整することはできません。

解決策としては、次の2つがあります。

①テキストを画像として読み込む：これは最も簡単な方法ですが、SEOに影響を与える可能性があるため、避けるべきです。

②文字をspanタグで分ける：これはかなり手間がかかる方法です。もし、このレベルで完璧なピクセルを求められる場合、追加料金を請求することを検討してください。

下記のように、spanタグで一文字ずつ分け、それぞれにCSSのletter-spacingを使って文字間隔を調整します。

The post 丁寧なコーディングに最適なPerfect Pixelがおすすめ first appeared on Innofly.

アプリケーションに脆弱性がある場合、以下のような被害に遭い、運営者やそれを利用するユーザにまで影響が及びます。

Webアプリケーションは、場合によっては不特定多数のユーザがアクセスするため、脆弱性がある状態での公開は非常に危険でしょうか。（特に個人情報を扱うようなアプリなど）

ウェブアプリケーションのセキュリティ脆弱性をテストするために、OWASP ZAPを使用してみましょう。OWASP ZAPはオープンソースで無料で利用できるツールでありながら、SQLインジェクションの脆弱性など、そういったセキュリティに関する診断を行うことができます。
Webアプリケーションのすべての画面を手動でチェック、または、不正パラメータを手動で送信して確認というのは難しでしょうか？
このツールを使うことで、自動で様々なパターンの検証を行い診断を行うことができます。

脆弱性診断を行う専門の業者がたくさんありますが、費用が高いし、作成したアプリケーションを「取り敢えず診断してみたい」という気持ちがあれば、とても便利です。

インストールと基本的な使い方

それではOWASP ZAPをインストールしていきましょう。

Javaのインストール

OWASP ZAPのインストール前に、JREをインストールする必要があります。
JREがインストールされていない状態で、OWASP ZAPをインストールしようとすると、以下のエラーが表示されます。

以下のページより、64bit版のJREをダウンロードしてください。

ライセンスを確認し、ダウンロードします。
現時点で、Version 8 Update 311でした。

インストーラを起動し、インストールを実行します。

しばらくすると、インストールが完了しました。

OWASP ZAPインストール

以下のページより、OWASP ZAPのインストーラをダウンロードします。

https://www.zaproxy.org/download/

ダウンロードしたインストーラを起動します。
次へ進みます。

ライセンスを確認し、次へ進みます。

ここでは標準インストールを選択しました。
インストール先を変更したい場合は、カスタムインストールを選択します。

インストールを開始します。

インストールが完了しました。

旧バージョンのダウンロード

古いバージョン（例えばv2.10.0）をダウンロードしたい場合は、GitHubのリポジトリにあります。
さらに古いバージョンも探せばあります。

OWASP ZAP起動

早速起動してみましょう。

プロテクトモードになっていることを確認しましょう。
これが選択されていることにより、コンテキストに登録されたサイトのみが診断対象となります。

OWASP ZAP設定

OWASP ZAPのオプションを開きます。

ローカル・プロキシから、ポートを確認します。
デフォルトで18080になっていましたが、必要に応じて変更してください。

Firefoxを開き、設定を変更します。
ネットワークの設定の接続設定を開きます。

OWASP ZAPの設定と同じく、プロキシとポートを指定します。

今回は、ローカル（自分のPC）に作成したWebアプリケーションを対象にしてみます。
Laravelで作成したサイトを表示しました。

OWASP ZAP上で認識されました。

OWASP ZAPの基本的な使い方

このサイトを対象とするために、コンテキストへ登録します。

サイトを右クリックし、規定のコンテキストへ追加しました。

サイトがコンテキストに追加されました。

これでサイトへの攻撃ができるようになりました。

スパイダー

スパイダーとは、サイトに含まれるページを自動的に検知します。

スパイダーを選択します。

スコープを確認し、スキャンを開始します。

対象サイトがLaravelのスタートページであり、それほどリンクがないのですが、一部のファイルを認識しました。

ちなみにこのページには、外部のURLが含まれていますが、コンテキストに含まれないページは追加されませんでした。

動的スキャン

それでは実際に脆弱性の診断を行いましょう。
動的スキャンを選択します。

設定はそのままでスキャンを開始しました。

ページ数やスキャンの設定によりますが、時間がかかります。
スキャンが完了しました。

アラートタブを確認すると、スキャンした結果が表示されます。
リスクというのが危険度です。リスクが高いものは対応したほうが良いと思いますが、必要に応じて対応可否を検討すると良いでしょう。

レポートの出力

どうやら2.11.0でレポートの出力が変わったようです。

なにやら文字化けしているようですが・・

以前とは違うレポート結果が出力できました。

セッションの保存

今回行った作業を、セッションとして保存しておきましょう。
次回、OWASP ZAPを起動後に、同じ状態に読み込むことができます。（セッションデータファイルを開く）

後処理

一通り作業が終わったら、Firefoxの設定を戻しておきましょう。

さいごに

今回はツールを使用して、脆弱性診断を行ってみました。
脆弱性はなかなか見つけにくいため、コーディング時に気をつけるのはもちろんですが、こういったツールで確認するのも効果的です。

作成したWebアプリケーションには、是非利用しましょう。

The post 【OWASP ZAP】Web脆弱性診断ツール|【インストールと基本的な使い方】 first appeared on Innofly.

Number、String、Boolean、 Object

Number、String、BooleanまたはObjectのタイプを決して使用しないでください。

これらのタイプは、非プリミティブ オブジェクトを参照します。 Java、C++ などの言語の場合、これらのタイプは有効です。

/* WRONG */
function reverse(s: String): String;

但し、TypeScriptではこのタイプの宣言は認識されません。

代わりにnumber、string、boolean、object を使用してください。

/* OK */
function reverse(s: string): string;

コールバックのタイプ

コールバックの戻り値のタイプ

値が無視されるコールバック内の関数の戻り値にany型を使用しないでください。

/* WRONG */

function fn(x: () => any) {

    x();

}

代わりにvoid型を使用してください。

/* OK */

function fn(x: () => void) {

    x();

}

理由:　void を使用すると、x の戻り値を意図せずに使用することが防止されるため、より安全です。

function fn(x: () => void) {

    var k = x(); // oops! meant to do something else

    k.doSomething(); // error, but would be OK if the return type had been ‘any’

}

コールバック内のオプションパラメータ

必要な場合以外はコールバック関数でオプションのパラメータを使用しない方がいいです。

/* WRONG */

interface Fetcher {

    getObject(done: (data: any, elapsedTime?: number) => void): void;

}

これは、実行されたコールバックが 1つまたは2つのパラメータで呼ばれる可能性があることを意味します。 筆者の意図は、コールバックが elapsedTime パラメータをきにしないかもしれませんが、オプションパラメータを使用してこれを実装する必要はありません。なぜなら、より少ないパラメータを受け入れるコールバックを提供することは常に正当です。

代わりに、コールバック内のパラメータを非オプションとして書いてください。

/* OK */

interface Fetcher {

    getObject(done: (data: any, elapsedTime: number) => void): void;

}

オーバーロードとコールバック

関数パラメータのみが異なる個別のオーバーロードを作成しないでください。

/* WRONG */

declare function beforeAll(action: () => void, timeout?: number): void;

declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

代わりに、最大のパラメーターを持つ単一のオーバーロード関数を作成してください。

/* OK */

declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

関数のオーバーロード

特定のオーバーロード関数の前に一般的なオーバーロード関数を書かないでください。

/* WRONG */

declare function fn(x: any): any;

declare function fn(x: HTMLElement): number;

declare function fn(x: HTMLDivElement): string;

var myElem: HTMLDivElement;

var x = fn(myElem); // x: any, wat?

代わりに、特定のオーバーロードを最初に宣言してください。

/* OK */

declare function fn(x: HTMLDivElement): string;

declare function fn(x: HTMLElement): number;

declare function fn(x: any): any;

var myElem: HTMLDivElement;

var x = fn(myElem); // x: string, : )

理由: TypeScript は最初に宣言されたオーバーロード関数を選択します。

オプションパラメータの使用

渡されるパラメータのみが異なるオーバーロード関数を書かないでください。

/* WRONG */

interface Example {

    diff(one: string): number;

    diff(one: string, two: string): number;

    diff(one: string, two: string, three: boolean): number;

}

代わりに、可能な限りオプションパラメータを使用してください。

/* OK */

interface Example {

    diff(one: string, two?: string, three?: boolean): number;

}

ユニオンタイプの使用

引数の位置のみが異なるオーバーロード関数を書かないでください。

/* WRONG */

interface Moment {

    utcOffset(): number;

    utcOffset(b: number): Moment;

    utcOffset(b: string): Moment;

}

代わりに、ユニオンタイプを使用してください。

/* OK */

interface Moment {

    utcOffset(): number;

    utcOffset(b: number|string): Moment;

}

ご覧いただきありがとうございます。

The post TypeScriptを使用する際の注意事項 first appeared on Innofly.