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

今日は、ファイルのアップロードについて、特に、同じファイル名でファイルをアップロードできるようにするとどうなるか、古いファイル名を上書きしてしまうか、それをいろいろとお話したいと思います。

例えば、デフォルトで登録フォームがあり、アバターがあり、誰かがavator.jpgというファイル名でファイルをアップロードしたとします。これは正常にアップロードされているのですが、開発者がよくやるのは、ClientOriginalNameが悪意のないものであることを信じてファイル名をアップロードすることです。
しかし、元のファイル名を保持したい場合は、それは大丈夫かもしれません。しかし、同じファイル名で登録した人がいて、そのファイルがstorage/app/public/avatorsにavator.jpgとしてアップロードされた場合、問題が発生することがあります。

そして、別のユーザーで登録しようとし、ユーザー情報を入力し、異なるパスからアバターをアップロードしますが、ファイル名は同じです。登録後、古いアバターはやみくもに上書きされ、サーバーから削除されることさえあります。というわけで、これは今問題になっています。どのようにコードでそれを解決するかは、いくつかの異なる方法があります。

ということで、今からこの方法をお話ししたいと思います。

1つ目はファイル名を変更する方法です。

if ($request->file('avatar')) {
            $fileName = pathinfo($request->file('avatar')->getClientOriginalName(), PATHINFO_FILENAME) . '-' . $user->id . '.' . $request->file('avatar')->getClientOriginalExtension();

            $request->file('avatar')->storePubliclyAs('avatars', $fileName, 'public');

            $user->update([
                'avatar' => $fileName ?? null,
            ]);
        }

アベータがある場合、拡張子なしのファイル名からファイルを作成し、ユーザ登録からuser_id、そしてオリジナルの拡張子からファイルを構築することになります。そして、そのファイルをファイル名と一緒にパブリックドライバに保存し、ユーザを更新します。

2つ目はサブフォルダを作成する方法です。

$request->file('avatar')->storePubliclyAs("avatars/{$user->id}", $request->file('avatar')->getClientOriginalName(), 'public');

publicのuser_idサブフォルダに元のファイル名で保存します。

結果一覧

はい。ということで今回は以上になります。

By Ami

Tweet

今回はDataTablesを使用したテーブル生成方法とサーバーサイド連携方法の連載Part4です。
前回の記事「DataTablesを使用したテーブル生成とサーバーサイド連携(3)」で発生した問題の原因と解決の方法について紹介いたします。

Tweet

Today, I would like to share about comparisons between Ubuntu and Linux Mint Operating systems. Let’s take a look.

Ubuntu is the most famous Linux distribution. Its development started back in 2004. It is based on Debian distribution, which is why Ubuntu also uses the dpkg packaging system (And .deb package format) along with the apt packager manager.

Linux Mint, on the other hand, is based on Ubuntu. Its development started in 2008. Hence, Mint by extension is also based on Debian, and uses the same package manager and packaging system.

1. Distribution Goals

Ubuntu does not aim to be a simple Linux desktop distribution. Instead, Ubuntu is a general-purpose Linux distribution that can be used on servers, cloud, IoT and embedded devices.

Linux Mint, on the other hand, is nothing more than a desktop Linux distribution. There are no Linux Mint versions for servers or cloud or IoT… etc.

2. Software Manager

Ubuntu Software Center is slow while interacting with it. Of course, things have improved over the years but even with Ubuntu 20.04, on board, you will often notice it loading up slow or freezing when updating/installing an app. On the other hand, Linux Mint’s Software Manager is lighter and quicker.

3. User Interfaces

Ubuntu comes with the GNOME desktop environment. GNOME is an open-source desktop environment, which means that it’s a collection of programs associated with a GUI. The GNOME GUI has a dock on the left side where you can see all opened applications.

Mint comes with Cinnamon as a default desktop environment. Cinnamon is a Windows-like interface with a launcher, panel, and a system notification area on the bottom.

Ubuntu does support other desktop environments like Budgie, KDE, and Xfce. Mint only supports KDE and Xfce in addition to its default, Cinnamon.

4. Memory Usage

Desktop environments usually consume a lot of memory in order to run, which reduces the performance of the OS. Both Cinnamon and GNOME have their own perks but Cinnamon consumes significantly lesser memory than Ubuntu Desktop, making Mint the best distro for old PCs. So, the advantage of Mint is Cinnamon’s lower memory consumption as compared to GNOME.

5. Preinstalled Applications

Every Linux distribution comes with preinstalled applications like internet browsers, video players, image editors, and text editors. While Ubuntu offers more applications, their applications are difficult to search for, as you have to remember the exact name of the application. You can’t just guess the name or depend on browsing to find it.

Mint, on the other hand, only offers basic applications, but those applications are easy to find on their Windows-like menu.

This is all for now. Hope you enjoy that.

By Asahi

Tweet

The only way to include images and figures in your Github Markdown file is to embed images or svgs. If you want to keep your diagrams updated, want to make changes everytime and create diagrams easily, you should take a look at Mermaid.

Mermaid is a JavaScript-based graphing and charting tool that takes Markdown-inspired text definitions and dynamically creates charts in your browser.

It supports a variety of common diagram types for software projects like flowcharts, UML, Git charts, user flow diagrams, Gantt charts.

For example, its syntax is like below.

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```
Credit: Github

The above code snippet will output as below.

The result is a fast, easy-to-edit vector-based diagram where you need it in your document. Mermaid is becoming more and more popular among developers and have a rich community of contributors.

When we write a block of code marked as mermaid, it generates an iframe that takes the raw syntax of Mermaid and passes it to Mermaid.js, converting that code into a diagram in the local browser.

As a conculsion , it’s awesome and convient for developers who want to add diagrams on their github markdown. Thanks to the Knut Sveidqvist, creator of mermaid and you can also checkout the mermaid website here.

Yuuma

Tweet

最近新しいことを勉強したいので、REACT JSというフロントエンドJavaScriptライブラリを勉強始めました。

今回は、自分のOSにReactJSをセットアップする方法を紹介します。

MacOSにReactJSをインストールするためには、まずNodeJSとNPMがインストールされている必要がありますので、以下のようにチェックしてみます。

node --version
npm --version

こうすると、NodeJSとNPMのバージョンが返されます。

React JSとReact-domを1つのコマンドでインストールする

ことで、NodeJSとNPMがインストールされたので、プロジェクトにReactJSと React-domをインストールすることができるはずです。

npm install --save react react-dom

React JSプロジェクトの作成

ReactJSもインストール終わったところ、新しいプロジェクトを作成することができます。

npx create-react-app my-react-project

このコンマドが「my-react-project」という名で新しいプロジェクトを作成されます。ディレクトリが以下のような感じになります。

JSXの紹介

index.jsを少し変更し、JSXを適用してみました。

このJSXの構文は、HTMLに似ているように見えますが、HTMLではありません。

const navbar = (
    <nav>
      <h1>My frist React</h1>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
);

Reactはユーザーインターフェースの仮想的な表現（Virtual DOMと呼ぶ）を作成し、ReactDOMはそのVirtual DOMに基づいてDOMを効率的に更新するライブラリです。

というわけで、ReactとReact-domをインポートすることにします。

import React from 'react';
import ReactDOM from 'react-dom';

最後に、このReactをdomにrenderするために、このReactDOM.render関数を呼び出します。rootIDはindex.htmlファイルに既に記述されています。react-projectを作成したら、index.htmlも確認してみて下さい。

ReactDOM.render(element, root);
ReactDOM.render(navbar, document.querySelector('#root'));

最後に、reactプロジェクトの中に入ったら、以下のコマンドを実行して、「localhost:3000」で開発用サーバーを起動し、実行します。

npm start

そうすると結果は：

はい。今回はこれで終わりです。

By Ami

Tweet