2018年10月25日木曜日

社内エンジニアが「デザイナーのためのReact勉強会」を開催!第1回目レポート

jQuery: delayとqueueの使い方

jQuery で5秒後とかに addClass したいとき · Issue #61 · shikakun/tips · GitHub
https://github.com/shikakun/tips/issues/61

方法1
$('#selector').delay(5000).queue(function(next) {
    $(this).addClass('hogemoge');
    next();
});
方法2
$('#selector').delay(5000).queue(function() {
    $(this).addClass('hogemoge').dequeue();
});


また、CSSアニメーションの終了を検知する方法もあります。

// transition終了判定
$('.js-item').on('transitionend', function() {
  $('.js-stateTxt').text('transitionのボタンを押したね!').addClass('is-end');
});

// keyframes終了判定
$('.js-item').on('animationend', function() {
  $('.js-stateTxt').text('keyframesのボタンを押したね!').addClass('is-end');

CSSアニメーションの終了を検知してみよう! | やくにたたないメモ帳


npm 基本

いまさら聞けない!npmのこれだけは知っておきたい基礎知識 - WPJ
https://www.webprofessional.jp/beginners-guide-node-package-manager/

ローカルのPDFを全文検索するクライアント/サーバ/Electronアプリを書いた | Web Scratch

2018年10月17日水曜日

MySQL テーブル定義書を生成する

<?xml version="1.0" encoding="utf8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:s="http://sqlfairy.sourceforge.net/sqlfairy.xml">
<xsl:output method="html" encoding="utf8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/>

<xsl:template match="database">
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>テーブル定義</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<style>
table.htable {
margin: 3em auto 1em auto !important;
}
table.htable th {
border-left: 10px solid #e5e5e5 !important;
}
footer {
border-top: 1px solid #e5e5e5;
padding: 0.5em;
}
</style>
</head>

<body>
<div class="container">
<h1 class="page-header">テーブル定義</h1>
<xsl:apply-templates select="table_structure"/>
</div>
<footer class="text-center">
your company
</footer>
</body>
</html>
</xsl:template>

<xsl:template match="table_structure">
<table class="table table-bordered htable">
<tbody>
<tr class="active">
<th>テーブル名</th>
<td>
<xsl:value-of select="options/@Comment"/>
</td>
</tr>
<tr class="active">
<th>スキーマ</th>
<td><xsl:value-of select="@name"/></td>
</tr>
</tbody>
</table>
<table class="table table-condensed">
<thead>
<tr>
<th class="text-right">#</th>
<th>論理名</th>
<th>物理名</th>
<th>型</th>
<th>NULL</th>
<th>デフォルト値</th>
<th>主キー</th>
<th>ユニーク</th>
</tr>
</thead>
<tbody>
<xsl:apply-templates select="field"/>
</tbody>
</table>
</xsl:template>

<xsl:template match="field">
<tr>
<td class="text-right"><xsl:value-of select="position()"/></td>
<td><xsl:value-of select="@Comment"/></td>
<td><xsl:value-of select="@Field"/></td>
<td><xsl:value-of select="@Type"/></td>
<td><xsl:if test="@Null='YES'"><span class="glyphicon glyphicon-ok"></span></xsl:if></td>
<td><xsl:value-of select="@Default"/></td>
<td><xsl:if test="@Key='PRI'"><span class="glyphicon glyphicon-ok"></span></xsl:if></td>
<td><xsl:if test="@Key='UNI'"><span class="glyphicon glyphicon-ok"></span></xsl:if></td>
</tr>
</xsl:template>

</xsl:stylesheet>

続・MySQL データベースからテーブル定義書を生成する - 私と私の猫の他は誰でも隠し事を持っている
http://mariyudu.hatenablog.com/entry/2015/02/01/200517

上記を参考に以下のコマンドで作成します。

1.sample_dbから定義書sample_dbを生成
$ mysqldump -u username -p --no-data --xml sample_db > sample_db.xml

2.style.xslでxmlファイルをhtmlに変換
$ xsltproc -o sample_db.html style.xsl sample_db.xml


データベース名:samble_db
テーブル定義書:samble_db.xml
スタイルシート:style.xsl
最終出力:sample_db.hmtl


VSCodeのオススメ拡張機能 24選 (とTipsを少し)

2018年10月12日金曜日

iPhoneでも動画インライン再生

iPhoneなどのモバイルのブラウザ(Mobile Safari)では動画再生がモバイルネイティブのプレーヤーで強制的に全画面再生されてしまう仕様でしたが、iOS10以降はインライン(画面のその場所)で再生できるようになりました。
Android上のChromeでもインライン再生可能でした。

<video src="video.mp4" playsinline webkit-playsinline></video>

iOS 9 までは webkit-playsinline を指定しインライン再生が可能でした(WebView)
iOS 10 以降は playsinline を指定しMobile Safari でもインライン再生が可能
*両方指定してもOKでした。

モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた
https://qiita.com/tomoyukilabs/items/cb9dd1d3e7eb0cc7f58a

Monaca モバイルでの動画インライン再生

<video src="sample.mp4" playsinline webkit-playsinline></video>

上記のようにしても Monaca で iPhoneやiPadで動画がインライン再生されなかったのですが、

config.xml の AllowInlineMediaPlayback を true にすればOKでした。

<preference name="AllowInlineMediaPlayback" value="true"/>


Elasticsearch 入門