Skip to content

Instantly share code, notes, and snippets.

Avatar

Kazuo Tsubaki kazz12211

View GitHub Profile
@kazz12211
kazz12211 / index.html
Created Dec 26, 2019
CSSのみのレスポンシブレイアウト
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Tsubaki Guitars</title>
</head>
@kazz12211
kazz12211 / configure_ckeditor5_simpleuploadadapter.md
Last active Apr 2, 2020
AngularアプリでCKEditor5のSimpleUploadAdapterを使ってNode.jsサーバーに画像をアップロードする
View configure_ckeditor5_simpleuploadadapter.md

Angularアプリケーション内のCKEditor (ClassicEditor) でSimpleUploadAdapterを使う

カスタムエディターを作らない場合のやり方。

リポジトリをクローンする

適当なディレクトリを作りソースコードをダウンロードする。

$ git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
@kazz12211
kazz12211 / index.html
Created Dec 17, 2019
CSSでモバイルUIを作る・Splash画面の表示・タブ・レスポンシブ
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>tsubaki guitars & leather</title>
@kazz12211
kazz12211 / node-angular-autoreload.md
Last active Nov 29, 2019
Node.jsでAngularアプリを自動リロードしながら開発する方法
View node-angular-autoreload.md

プロジェクトのワークスペース

プロジェクトのワークスペースとなるディレクトリを作成し、そのディレクトリにAngularプロジェクトとNode.js(+Express)プロジェクトを作成します。 Node.jsプロジェクトにはnodemon(プロジェクト内のファイルを監視してコードをリロードしてくれる)をインストールします。

$ mkdir myworkspace
$ cd myworkspace
$ ng new myapp
$ mkdir server
$ cd server
@kazz12211
kazz12211 / nodejs-slack.md
Last active Nov 29, 2019
Node.jsでSlackのチャネルにメッセージやファイルを送信する方法
View nodejs-slack.md

Slack API呼び出しモジュール

const { WebClient } = require('@slack/web-api');
const fs = require('fs');

function fileContent(path) {
    const data = fs.readFileSync(path);
    return data;
}
@kazz12211
kazz12211 / get_column_info_mysql.md
Last active Oct 30, 2019
MySQLでテーブルから列情報を取得する - Node.js + MySQL
View get_column_info_mysql.md

ダイナミックにデータベースを検索するアプリケーションなどで、アクセスするデータベースのテーブル構造を調べてから検索するような場合に利用できるテクニックです。

MySQLの指定したテーブルからサンプルデータをフェッチし、その結果から列情報を取得する方法です。

const mysql = require('mysql');
...
...
    describe(connectionInfo, tableName, fetchLimit) {
      // データベース接続情報
@kazz12211
kazz12211 / get_column_info_postgres.md
Created Oct 23, 2019
PostgreSQLでテーブルから列情報を取得する - Node.js + PostgreSQL
View get_column_info_postgres.md

ダイナミックにデータベースを検索するアプリケーションなどで、アクセスするデータベースのテーブル構造を調べてから検索するような場合に利用できるテクニックです。

PostgreSQLの指定したテーブルからサンプルデータをフェッチし、その結果から列情報を取得する方法です。

const express = require('express');
const router = express.Router();
const pg = require('pg');

router.post('/describe', (req, res) => {
@kazz12211
kazz12211 / Login.component.md
Last active Oct 23, 2019
ログイン画面でブラウザのパスワードマネージャーが記録したパスワードを使わないようにする方法 - Angular Material
View Login.component.md

input要素に以下の属性を設定する。

  • readonly
  • onfocus="this.removeAttribute('readonly');"
  • autocomplete="off"
<mat-card class="login-panel">
  <mat-card-header>
    <mat-card-title>ログイン</mat-card-title>
  </mat-card-header>
@kazz12211
kazz12211 / lean-typescript-1st-step.md
Created Mar 7, 2019
Learning TypeScript - First Step
View lean-typescript-1st-step.md

Learning TypeScript

TypeScriptのインストール

Nodeがインストールされている必要がある。

$ npm install -g typescript
@kazz12211
kazz12211 / TradeshiftEmbeddedApplication.md
Created Jun 8, 2018
TradeshiftのOAuth2認証を行うアプリケーションのテンプレート
View TradeshiftEmbeddedApplication.md

Tradeshift Embedded Application with OAuth2 authentication

Development environment

  • Eclipse Neon version 4.6.3 with Spring IDE version 3.9.4
  • Java 1.8
  • Spring Boot 1.5.12 or 1.5.13
  • AngularJS 1.6.2
  • Maven
  • etc.