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

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

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

システム開発をおこなう際の環境構築でパスを通す設定が必要になることがありますが、
Windows10のシステム環境変数の設定が下図のように「新規」「編集」「削除」の各ボタンが
グレイアウトしていて設定できない場合があります。

今回はこのような場合の対処法をシェアしたいと思います。

システム環境変数を有効化する方法

Windows10でシステム環境変数がグレイアウトしている場合、
以下の手順で操作をおこなうことで有効化することができます。

WindowsPowerShellを右クリックしてサブメニューから「管理者として実行」を選択します。

WindowsPowerShellのコマンドプロンプトが開きますので、以下のコマンドを入力します。

Start C:\Windows\system32\rundll32.exe sysdm.cpl, EditEnvironmentVariables

上記のコマンドを実行することにより、システム環境変数の「新規」「編集」「削除」の各ボタンが
有効化されます。

木曜日担当：nishida