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

Developers normally code a lot just for a month but think for a year. If we want to see our history of our git commits, PRs, reviews etc through out a year , there is a newly service website called Github Wrapped.

You just need to login your github account and go to this website.

GitHub Wrapped

You may be asked for authorization to use the website from your Github account. After giving authorization this home screen will appear. I used my personal Github account for testing purpose.

Then you just need to go on by clicking the play button, these are my results.

You will also see a bunch of your activities like followers, stars etc.

But for the final result, you will get a pretty home page for your activity history through out the year (2021).

You can even copy/download your final image to save on your disk or share on twitter. I think this is a nice and pretty way to see your Github activity history for a year.

Yuuma

今回は、Handsontableを使って、ファイルアップロードボタンを挿入する方法と、セル内に画像を表示する方法を紹介したいと思います。

Handsontableは、デフォルトで11個のエイリアスを提供することができます。

• time
• text
• select
• password
• numeric
• handsontable
• dropdown
• date
• checkbox
• base
• autocomplete

しかし、file editorでは、これまで提供できませんでした。ファイルアップロードボタンをセルに挿入することは、自分自身で発見しました。4つの方法があるのですが、今日はそのうちの1つ、cells内で呼び出されるrenderer関数を使った方法を紹介します。

今回は、rendererの呼び出し方と、ファイルアップロードボタンと画像の表示方法を中心に説明します。

まず、htmlファイルを作成し、必要なスクリプトファイルを挿入します。

<div id="example1" class="hot "></div>

<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" /> 

次に、Handontableを作成し、cells内にrendererを呼び出すための条件をいくつか作成します。commentsとcoversにcustom renderer関数を呼び出すことにします。

const hot = new Handsontable(container, {
                data,
                colWidths: [100, 100, 200],
                colHeaders: ['Title', 'File', 'Cover'],
                colWidths: 300,
                renderer: 'html',
                height: 200,
                columns: [
                    { data: 'title' },
                    { data: 'comments', renderer: safeHtmlRenderer },
                    { data: 'cover', renderer: coverRenderer } 
                ],
                cells: function (row, col, prop) {
                    var cellProperties = {};
                    if(col === 1){
                        cellProperties.renderer = safeHtmlRenderer
                    } 
                    if(col === 2){
                        cellProperties.renderer = coverRenderer
                    } 
                },
                licenseKey: 'non-commercial-and-evaluation'
            });

renderer関数の内部では、カスタムhtmlのデザインを作成し、innerHTMLプロパティでtdに挿入することができます。

function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div><input type="file" id="filechange" name="file[]" class="filebutton"></div>';

                return td;
 }

また、rendererで画像を表示することもできます。

function coverRenderer(instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<img src="imges/winter.jpg" width="300" height="150" >';

                return td;
            }

ここまでお読みいただき、ありがとうございました。

By Ami

今回はJavaScriptでQRコードをスキャンするライブラリcozmo/jsQR(https://github.com/cozmo/jsQR)を紹介します。

前回の記事「PHP QRコード生成ライブラリ「endroid/qr-code」」ではQRコードの生成方法を紹介しましたが、今回は生成したQRコードをスマートフォンやPCのWebカメラを使用してJavaScriptでスキャンする方法を紹介いたします。

続きを読む