アプリ関連ニュース

Laravel フォーム入力内容の復元

入力フォームを設置する場合に編集モードでは、DBに登録されている値を初期値として表示、
またバリデーションエラーになった場合はフォームに入力した値を復元したい場合があります。
そのような場合は、Laravelではold関数を使用することで簡単に対応できますので
その方法をシェアしたいと思います。

old関数について

{{ old(‘name’) }}

old関数の第2引数にデフォルト値が設定できます。DBに登録されている値を
初期値として表示したい場合に便利です。

{{ old(‘name’, ‘デフォルト値’) }}


テキストボックスの使用例

最もシンプルなテキストボックスでの使用例です。

<input type="text" name="name" id="name" value="{{ old('name', $recdata['name']) }}">


ラジオボタンの使用例

ラジオボタンは複数の選択肢の中からひとつだけ選択できる入力フォーマットです。
選択しているボタンの属性に「checked」をつけ加えるためold関数の値から条件分岐を設定しています。


@foreach ($list as $item)
<span><input type="radio" name="gender" id="gender{{$item->code}}" value="{{$item->code}}"
{{ old('gender', $recdata['gender'])==$item->code ? 'checked':'' }}>
<label for="gender{{$item->code}}" class="radio">{{$item->value}}</label></span>
@endforeach


プルダウンメニューの使用例

プルダウンメニューは複数の選択肢の中からひとつだけ選択できる入力フォーマットです。
選択しているリストアイテムの属性に「selected」をつけ加えるためold関数の値から条件分岐を設定しています。


<select name="pref" id="pref">
<option value="">都道府県を選択</option>
@foreach ($prefs as $pref)
  <option value="{{$pref->code}}" 
  {{ old('pref', $recdata['pref'])==$pref->code ? 'selected':'' }}>
  {{$pref->value}}</option>
@endforeach
</select>


チェックボックスの使用例

チェックボックスは複数の選択肢の中から複数選択可能な入力フォーマットです。
複数選択可能なため配列になっています。
選択しているチェックボックスの属性に「checked」をつけ加えるためold関数の値から条件分岐を設定しています。


@foreach ($list as $item)
<span><input type="checkbox" name="fav_player[]" id="fav_player{{$item->code}}" value="{{$item->code}}"
@if (is_array(old("fav_player", $recdata['fav_player'])) && in_array($item->code, old('fav_player', $recdata['fav_player']))) checked @endif>
<label for="fav_player{{$item->code}}" class="checkbox">{{$item->value}}</label></span>
@endforeach



木曜日担当:nishida



iPhoneやMacの修理が個人でも可能になるかもしれません

Appleは ユーザーに対して iPhone12以降の iPhone の修理用部品の販売や修理マニュアルを提供を始めると発表しました。

M1チップを搭載したMacにも対象を広げることも予定しているようです。

2022年の初め頃にアメリカでこの修理プログラムの利用が開始され、
その後に他の国へ対象が広げられるようです。

初めにディスプレイやカメラ、バッテリーの修理用部品の提供が開始され、後半にその他の機能の修理用部品の提供が行われるようです。

日本国内でこの修理プログラムが提供されるかどうかは現時点では分かりませんが、
提供されれば非正規の修理店や個人で修理が容易になり必要な修理費用をおさえる事が可能になるかもしれませんね。

修理後の端末が技適に適合するのか等、総務省の判断も気になるところです。

水曜担当:Tanaka



Code Obfuscation

Obfuscation is making something complex and difficult to understand. Programming codes are often obfuscated to decrease the security risks such as preventing an attacker from reverse engineering a software program and protect intellectual properties.

Code obfuscation is not about changing the program’s original code contents, but rather about making the presentation of that code more confusing. Obfuscation does not change how the program works or outputs.

The following are some techniques we should know about obfuscation.

Renaming

The obfuscator alters the methods and names of variables. The new names may include unprintable or invisible characters.

Packing

This compresses the entire program to make the code unreadable.

String encryption

This method uses encryption to hide the strings in the executable and only restores the values when they are needed to run the program. This makes it difficult to go through a program and search for particular strings.

Control flow

The decompiled code is made to look like spaghetti logic, which is unstructured and hard to maintain code where the line of thought is obscured. Results from this code are not clear, and it’s hard to tell what the point of the code is by looking at it.

Instruction pattern transformation

This approach takes common instructions created by the compiler and swaps them for more complex, less common instructions that effectively do the same thing.

Dummy code insertion

Dummy code can be added to a program to make it harder to read and reverse engineer, but it does not affect the program’s logic or outcome.

Metadata or unused code removal

Unused code and metadata give the reader extra information about the program, much like annotations on a Word document, that can help them read and debug it. Removing metadata and unused code leaves the reader with less information about the program and its code.

Summary

Obfuscation techniques are used in various cases. For example, these can be used to stop someone from copying your client-side code. And enterprises also need to make sure that websites are protected against malicious code injection and it difficult to discover useful information such as trade secrets (IP), credentials, or security vulnerabilities from an application.

Hope you enjoy that.

By Asahi



Deleting .env file back from Git

Sometimes , we accidentally pushed a file with some username , password or secret tokens etc. It has a variety security concerns for your project and this should be removed back from Git.

Git ignore

First thing you need to do is to add the file you don’t want to push to git at .gitignore file. Add it in .gitignore , commit and push it.

# Secret file
.env

But this will not change any effects to .env as the file is already pushed before and .gitignore doesn’t untracked the already committed changes

Deleting the file

So we have to remove the specific file , .env in our case from the git remote repo entirely. We can use the following command.

git rm -r --cached .env

If we push the changes , the .env file will be remove from the remote repository

Git History

However, one more thing is left which is git histories. We can check the .env file contents also in git histories. So we need to remove the specific git history as well to hide the .env contents.

To remove the file altogether, we can use like following.

git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch .env" HEAD

When you push this time, you have to use –force option.

git push --force

If we look at our history, we can still see the commits that include .env file but the content is empty.

That’s all for now.

Yuuma



JavaScript HandSonTable Renderer Memo

I would like to share about how to renderer as your desire cells when you use HandSonTable. HandSonTable can’t directly insert html elements into cells. But after declaration renderer:html in our table of cell, we can use html elements as your desire. Second ways is to create custom renderer in cells properties with our own way.

Firstly we will create simple html file. In this file we will import handsontable.min.js and handsontable.min.css. We can get these file script from this site cdnjs.com.

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

To insert our table, create a div with id attribute and call this id with JS querySelector.

<div id="example1" class="hot "></div>
const container = document.querySelector('#example1');

Usage of HandSonTable

const hot = new Handsontable(container, {
data : data 
});
const data = [
    { id: 1, name: 'Suga', isActive: true, date: '2021-11-25' },
    { id: 2, name: 'Jimin', isActive: false,  date: null },
    { id: 3, name: 'JHope', isActive: true,  date: null },
    { id: 4, name: 'V', isActive: false, date: null },
  ];

If you want to add colsHeader, set to true => colHeaders : true

And if you want to add strict cell type and render columns, we can set inside columns.

  columns: [
    { data: 'id', type: 'text' },
    // 'text' is default, you don't actually need to declare it
    { data: 'name', renderer: yellowRenderer },
    // use default 'text' cell type but overwrite its renderer with yellowRenderer
    { data: 'isActive', type: 'checkbox' },
    { data: 'date', type: 'date', dateFormat: 'YYYY-MM-DD' },
  ],

I will add another custom renderer named with greenRenderer but this greenRenderer will not add all the cell, just add some row. So I will use this greenRenderer inside a cell.

 cells(row, col, prop) {
    if (row === 3 && col === 0) {
      this.renderer = greenRenderer;
    }
  }

yellowRenderer function => this function will add all the cell with background color yellow.

const yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = 'organe';
};

greenRenderer function => this function will add some of cell with background color red.

const greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  td.style.backgroundColor = 'purple';
};

If you want to set custom colWidths , then set colWidths to your desire value.

colWidths : 100

Hope you enjoyed about this article!

By Ami



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム