SE奮闘記

WordPressのお知らせ投稿を自前の管理画面で実装しているときに、HTMLを編集するWYSIWYG(What You See Is What You Get)エディタは何がいいのかと調査したときの覚書。 環境： WordPress 5.9.3 WYSIWYGの一覧はWikipediaが参考になる。 WYSIWYG - Wikipedia TinyMCE WordPressに組み込まれている有名なWYSIWYGエディタ。 ライセンスは6.0（2022å¹´4月リリース）からMIT。 Tinyという会社がメンテナンスしている。 The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE What’s new in TinyMCE 6.0 | TinyMCE フリー版にはTable編集機能がない。 コマーシャルライセンスで使うならCKEditorよりTinyMCEがお勧めという記事をアップしている。 CKEditor vs TinyMCE | Why TinyMCE is the Best CKEditor Alternative | TinyMCE CKEditor TinyMCEと同じ2大WYSIWYGエディタの一つ。 コマーシャルライセンスのフリー版は5ユーザーまで。 フリー版にTable編集機能あり。 WYSIWYG HTML Editor with Collaborative Rich Text Editing summernote コミュニティで開発しているオープンソースのWYSIWYGエディタ。 jQueryベース。MITライセンス。 Table編集機能あり。 Summernote - Super Simple WYSIWYG editor 「メディアの追加」の実装が大変そう。

ブラウザがシークレットモード(Incognito mode/Private mode)だと予期せぬ不具合が発生するので、事前に警告するためJavaScriptで現在のモードを判断できるか調査したときの覚書。 シークレット ブラウジング - パソコン - Google Chrome ヘルプ Gist | Detect if the browser is running in Private mode (Promise based) ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN Gistのサンプルコードは動作しないというコメントがある。 そもそもシークレットモードが検知できるのがセキュリティ的な欠陥という議論がある。 「Chrome」のシークレットモードを検知できる手法、研究者が指摘 - CNET Japan 今検知できたとしても、将来的に出来なくなる可能性が高そう。 事前に検知するのは諦めた。 IEのテストをしなくてよくなったと思ったら、意外な検査項目が増えた（笑） 【関連記事】 WordPressのSessionの仕組み LINE Notifyでメールアドレスがないユーザーとの問合せ機能を実現したい

Google Analyticsみたいに管理画面のダッシュボードで統計情報をグラフ表示したいとJavaScriptライブラリを探しているときの覚書。 オープンソースのChart.jsで十分。 Chart.js | Chart.js GitHub | chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tag Chart.js v3.7.1 主な特徴 オープンソース。商用利用可能。MITライセンス HTML5 canvasで多くのグラフを表示させても高速描画ができる。 下記マイクロソフトのサイトでcanvasとSVGの比較グラフが分かりやすい。 参考：  SVG vs canvas: how to choose (Windows) | Microsoft Docs 参考：  canvas の最適化 - Web API | MDN CDNあり 開発が活発。ドキュメントがしっかりしてる。 プラグインの機能があるので拡張しやすそう。 参考： GitHub | chartjs/awesome: A curated list of awesome Chart.js resources and libraries より多彩なデータの見せ方をしたい場合はD3.jsが良さそう D3.js - Data-Driven Documents 【関連記事】 GoogleのAPIを使って日本地図を表示するためには

他とちょっと違う感を出すためにcanvasを使った3Dアニメーションをホームページに付けてみようと調査しているときの覚書。 HTML5とcanvas要素 canvas要素はHTML5以降で標準化された動的にグラフィックを描画する要素。 canvas要素 - Wikipedia canvas要素自体はIE9以降サポートされている。 "canvas" | Can I use... Support tables for HTML5, CSS3, etc WebGLとJavaScriptライブラリ WebGLは2D/3DグラフィックをレンダリングするJavaScript API。 描画処理にCPUではなくGPUを用いることで高速に処理が可能。 IE11以降と主要ブラウザでサポートされている。 WebGL - Wikipedia WebGL - 3D Canvas graphics | Can I use... Support tables for HTML5, CSS3, etc 簡素なグラフィック描画だけの場合は（CPUを利用した）canvas要素で十分。 3Dアニメーションをする場合はWebGL経由でGPU処理することでサクサク動く。 WebGLは次のようなJavaScriptライブラリを使うのが一般的。 three.js  ・・・3D描画によく使われる PixiJS  ・・・2D描画によく使われる 参考サイト wgld.org | WebGL: WebGL を始める前に canvas を知る HTML5 CanvasとWebGL 【関連記事】 Reactを使ったUIコンポーネント「Material-UI」

htmlのtextareaをコンテンツの高さに合わせたくて調査したときの覚書。 環境： jQuery 3.5.1 CSSのheight: 100%は親要素に合わせてしまう。 textareaの内包している値を全部見えるようにしてスクロールしないようにしたい。 結局JavaScriptでtextareaの内部コンテンツの高さを取得して設定する必要があった。 jQueryを使うとこんな感じ。 jQuery(function($) {   let $textarea = $('#textarea-id');   $textarea.on('keyup', function() {       $textarea.height('auto'); // Initialize       $textarea.height($textarea.prop('scrollHeight') - $textarea.height());   }); }); CSS textarea {   overflow: hidden;   resize: none;   padding: 12px 16px; } スマホの場合は実行しない方がいいかもしれない。

React Router（ページ遷移）のいいサンプルがないものかと探しているときの覚書。 環境： CentOS 7.6, Node.js v12.10.0 Material UIの公式サイトからFREEのものをダウンロード。 React Templates | Material-UI Theme s こちらのテンプレートを選んだ。 Material Dashboard React: Free Material-UI Dashboard @ Creative Tim v1.8: React v16.9.0, Material UI v4.3.2, React Router v5.0.1 展開してインストール $ unzip material-dashboard-react-master.zip $ cd material-dashboard-react-master $ npm install package.jsonを確認。start実行 $ less package.json $ npm run start ブラウザで表示すると。。。動いた。 ちゃんとFunction Componentで書かれているので読みやすい。 Reactのダッシュボードサンプルアプリとして非常に助かる。 あとはコードを読む。 React初心者はチュートリアルをやった後でないと意味が分からないと思う。 かなり時間の節約になったので、投げ銭的な意味でプレミアム版を買った。6,800円。 プレミアム版にはForm Validationなど、さらにサンプルが豊富なので買って正解。 ドキュメントも割としっかりしている。 【関連記事】 【React】Function ComponentでstateやcomponentDidMountも可能 Reactを使ったUIコンポーネント「Material-UI」

makeStylesの引数であるthemeの構造が知りたくて調査したときの覚書。 環境： React v16.9.0, Material UI v4.4.1 公式サイトでtheme構造が公開されている。 Default Theme - Material-UI 画面右上のヘッダーにあるテーマ切り替えボタンで、light/darkを切り替えるとそれに合わせて表示のtheme値も変わる。 例えばNavLinkで適用された文字装飾と文字色を戻すときは、   linkText: {     textDecoration: 'none',     color: theme.palette.text.primary,   } これを適用する。 【関連記事】 Reactを使ったUIコンポーネント「Material-UI」

React開発で日付処理のライブラリを探したときの覚書。 環境： React v16.9.0, Material UI v4.4.0 Moment.jsが安定 Moment.js | Home ドキュメントが充実していて、日付の足し算、引き算、経過日数などやりたいことは全てできる。 日本語設定も標準で配布されているので、importして設定すれば曜日を日本語表示可能。 設定方法は下記サイトで。 webpackでmoment.jsを日本語設定したものをimportする - Qiita 【関連記事】 ビルドツール「Webpack」を試す。LESSをCSSにビルド [Titanium] メモリリークを起こさないために気をつけること

サンプルのFunction ComponentをClass Componentに書き直しているときに、Function Componentで状態を管理できるし、componentDidMountも出来るようになって、しかも実行速度が速い。 という衝撃の事実が発覚したときの覚書。 環境： React v16.9.0, Material UI v4.4.0 この仕組みを提供するのがHooks。 React v16.8からの新機能。 詳しくは公式サイトで。 フックの導入 – React Class Componentで悩んだ経験がないと「動機」に書いてあることが理解できないかもしれない。 「ビデオによる紹介」がとても分かりやすいので見とくのがおすすめ（英語）。 フックを使ってデータ取得を行うサンプルはこちら。 フックでデータの取得をどのように行うのですか？｜フックに関するよくある質問 – React これからはFunction Component + Hooksが主流になる。 【関連記事】 Reactを使ったUIコンポーネント「Material-UI」 React.jsを学ぶ。買った本とVueとの比較。

ReactのUIコンポーネントを探しているときの覚書。 仕事ではBootstap v3を使っている。 なので、React Bootstrapにしようかと思ったけど、Reactを使う場面はアプリのようなUIがいいのではと思い、「Material-UI」を試してみることにした。 Material-UI: A popular React UI framework 特徴（Bootstrapユーザーの目線から） CSSがJSファイルに埋め込まれているCSS-in-JSに少し抵抗がある。参考：  Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD → 出来るだけ標準スタイルを利用する。独自部分は色だけ。それがマテリアルデザイン。 React全般にいえることだけどPHPと連携しづらい （後日追記予定） インストール 前の記事で作ったチュートリアル用アプリを元にして、公式サイトを参考にする。 $ cd react-demo $ npm install --save @material-ui/core @material-ui/icons 前に作ったApp.jsxを編集してみる。 $ less src/App.jsx import React, { Component} from "react"; import Button from '@material-ui/core/Button'; //import "./App.css"; class App extends Component{ render(){ return( Hello World ); } } export default App; ビルド $ npm run build ちゃんとスタイルされたボタンが表示された。 スタイルを含め全部bundle.jsに出力されているみたい。 これだけでもbundle.jsは1.5Mになった。 CSSを書かなくていいのが不思議な感じ。 あとは公式のTemplatesにソースコードが公開されているので参考にする。 Free ...

WordPressの１ページをReactを使って開発したいと勉強しているときの覚書。 環境： CentOS 7.6, node v11.14.0 今まで通りPHPでさくっと作れるけれど下記理由で今に至る Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい 予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思う そろそろ技術の淘汰が進んで学びやすくなっていそう まずはReact公式サイトを読む Create a New React App – React そこからリンクされている記事を参考にする。 Creating a React App… From Scratch. - Noteworthy - The Journal Blog 作業環境を作る $ mkdir react-demo $ cd react-demo/ $ npm init -y 各種ディレクトリ作成 $ mkdir public src dist index.htmlは Gist のを流し込む。 $ vi public/index.html Babelのインストール Babelの公式サイト で各種パッケージの説明がある。 $ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react Babelの設定ファイルを作る $ vi .babelrc {   "presets": [     "@babel/preset-env", "@babel/preset-react"   ] } Webpackのインストール まずは必要なものだけ。 $ npm install --save-dev webpack webpack-cli babel-loader 設定ファイルを作る $ webpack.config.js const path = require("path"); module.expo...

React（仮想DOM）を試してみたくて、WordPressサイトの一部（ログイン後の管理画面）をReactで構築したときの覚書。 Reactの基礎 Reactは「UI構築のためのJavaScriptライブラリ」 React – ユーザインターフェース構築のための JavaScript ライブラリ Reactの主な特徴 「learn once, use everywhere（一度学習すれば、どこでも使える）」が目標 SPA(Single Page Application)を構築するのに優れている。 仮想DOMの考え方はFlutterにも影響を与えた。 参考： 翻訳記事:俺のFlutterはレボリューション(革命)だ！ - Qiita Reactの参考書籍 買ったのはこの本 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 余計なことを掲載せず「Reactとは」を理解するには良書だと思う。 詳しいことはウェブに全部あるし。 React.jsとVue.jsとの比較 VueはReactの考え方を元に、よりシンプルに記述できるよう設計された。 参考サイト   ReactとVueのどちらを選ぶか - Qiita 他のフレームワークとの比較 — Vue.js 【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018å¹´4月) - Rのつく財団入り口 Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA 決めてになったのは最期の速度比較記事。 バックエンドがPHP(WordPress)なので、Vueの方が合っているような気もするけど、将来的なことを考えてReactを採用することにした。 …というか、これから試して実装するか判断する。 【関連記事】 「Flutter」でAndroidアプリ、iOSアプリ開発計画 CentOS6でv8をソースからビルド

PHPStormを使うようになってからは、PHPStormの機能だけでJavaScriptの文法チェックをしていたけど、ちゃんとlintツールを使うように設定したときの覚書。 環境： Windows 10, PHPStorm 2019.1.2 lintはバグの原因になるような曖昧な記述を警告してくれるプログラム（の総称）。 lint - Wikipedia JavaScriptのLintツールは今なら「ESLint」を使っておけば間違いない。 まずは公式のスタートガイドを読む。 ESLint - Pluggable JavaScript linter Getting Started with ESLint - ESLint - Pluggable JavaScript linter npmでインストールする。 # npm install --save-dev eslint 設定ファイルを作る # vi .eslintrc.json {   "extends": ["eslint:recommended"],   "env": {     "browser": true,     "jquery": true   },   "rules": {     "strict": ["error", "function"],     "no-console": "error"   } } PHPStormの設定 公式サイトのヘルプを参考に。 ESLint - Help | WebStorm ESLintを「Manual ESLint configuration」にする。 .eslintrc.jsonをPHPStormで編集した後は右クリックで「Apply ESLint Code Style Rules」で読み込む。 単独のjsファイルは問題ないのだけれど、PHPファイル内のscriptタグにはESLintでチェックされない？ JavaScriptのコーデ...

PhpStormのファイル監視機能を設定したときの覚書。今まで仮想マシンにSSHでログインしてgruntのファイル監視を使っていたけれど、成功したのか失敗したのか分かりにくかった。 環境： Windows 10, PhpStorm 2016.3, Node.js 6.9.1   参考 How to create file watchers transpiler configurations. | PhpStorm   目次 Windows10にlessをインストール File Watchersの設定 less-plugin-clean-cssをインストール   １．Windows10にlessをインストール Node.jsは既にインストール済み。npmでlessモジュールをインストールする。cmdプロンプトを立ち上げて > npm install -g less インストールされるフォルダ C:\Users\Daiki\AppData\Roaming\npm\node_modules   ２．File Watchersの設定 PhpStormの設定からFile Watcherを新規追加。Programはすでに入ってた。 ちなみに「Sources」ディレクトリに設定して参照している。参考： PhpStorm 2016.3 Help :: Directories これでlessファイルを編集してみるとコンパイルされた。   ３．less-plugin-clean-cssをインストール 出力されたCSSファイルを見てみると先頭に The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css. とあったので「less-plugin-clean-css」をついでにインストールすることにした。 less-plugin-clean-css | NPM > npm install -g less-plugin-clean-css File WatcherのA...

ES6から非同期処理の仕組みが強化されたので調査したときの覚書。 今までは async.js を使っていた。全く問題なかったけど、速度的には遅い方らしい。 Why I am switching to promises   目次 Promise Generator 今後どう書いていくか   まずはES6で標準入りしたPromiseとGeneratorを理解するところから。   １．Promise 下記サイトが分かりやすい。 Chapter.1 - Promiseとは何か | JavaScript Promiseの本 Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みの事をいいます。 今までコールバックしていたのをPromiseを通して操作すると一貫した書き方が出来るようになる。 Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog Promiseをラッピングして使いやすくしているライブラリが bluebird 。 よく使うasync.parallel()はPromise.all()で置き換えることが出来る。 bluebird/API.md at master · petkaantonov/bluebird | GitHub   ２．Generator 処理を任意の時点で止めて再開できるフロー制御の仕組み。 「function*」でGeneratorであることを宣言。「yield」キーワードで止める箇所を指定。 非同期関数をyieldで宣言して、順次実行するのに便利。 Generatorを利用したフロー制御のライブラリが co 。 サンプルプログラムとかは下記記事を参考に。 Node.js 0.12 では yield が使えるのでコールバック地獄にサヨナラできる話 - てっく煮ブログ   ３．今後どう書いていくか 個人的にGeneratorの「function*」「yield」という見慣れないキーワードを書くのに抵抗があるので、Promise中心でいく予定。 既に試してみた方の記事もあるので参考に。 Node.js - 最近のjs非同期処理 ...

Titaniumで開発するときは外部ライブラリを使わずネイティブなJavaScriptの書き方をしていたけど、Alloyは underscore.js 使っているし、新規開発は lodash を使おうと設定したときの覚書。 ちなみにAlloyを使わずにレガシーな書き方をしてる。 環境： OS X 10.10.4, Titanium SDK 4.1.0.GA   参考 UnderscoreとLodashが統合に向けて議論 | InfoQ lodash custom builds   １．lodashをダウンロード、インストール 今後のバージョンアップを簡単にするためにlodashコマンドをインストール $ cd /path/to/project/ $ sudo npm install -g lodash-cli コマンド確認 $ lodash --help 「modularize」にしようか迷ったけど、とりあえず一つのファイルの方が管理しやすいので「modern」でインストール。 $ lodash modern --production --output Resources/lib/lodash.js var _ = require('lib/lodash');     ２．PhpStrom用設定 なぜかPhpStormでunresolvedのWarningが出るので、npmとしても追加する。 $ npm install lodash --save-dev node_modulesを「library home」に設定。 Settings -> Languages & Frameworks -> JavaScript -> Libraiesで「lodash-DefinitelyTyped」を追加しても「unresolved」は消えなかった。   複雑な処理はAPI（サーバー）側でやっているので、そんなにlodashの出番がない。。。   < Related Posts > 今年のTitanium向けに書いた記事まとめとアプリ紹介2014版 【Titanium】thisとparentとchildrenを使った書き方 ...

TitaniumでWebSocketを活用したリアルタイムアプリを作りたくて調査している時の覚書。 TiWSというTitaniumモジュールは管理する人が変わりながらメンテナンスはされているみたい。 omorandi/tiws | GitHub Socket.io 1.0には対応していないみたい。 Compatibility Socket.io 1.0 · Issue #9 · omorandi/tiws   Socket.IOにはiOS, Android用のクライアントライブラリが公開されているので、これらをTitaniumモジュールとしてラッピングしたい socketio/socket.io-client-swift | GitHub nkzawa/socket.io-client.java | GitHub   TitaniumモジュールでSwiftはまだ使えない？Titanium 4.0からはSwiftでも大丈夫になった感がある。 [TIMOB-18844] iOS: Swift is not supported for Extensions - Appcelerator JIRA   この前Google NextでFirebaseの話を聞いたので、こちらも気になったりしてる。 Firebase - Build Extraordinary Apps 準リアルタイムなバックエンド開発を支援するGoogleのFirebase Titanium - Firebaseを使ってリアルタイムサービス - Qiita   < Related Posts > Google Container Engineについて調査 TitaniumでWebSocketを使いたくてtiwsをビルドする アプリ向けのサーバーAPIは「REST」 or 「WebSocket」？

とあるシステムがqmailでメールサーバーを構成していて、新着メールをトリガーにPHPを実行していた。 このサーバーを移行するときにメールはGmail(Google Apps)で受け取るようにして、サーバーからはGmailを監視するように変更したときの覚書。 環境： CentOS 6.6, iojs-v1.4.2 ざっと調べた感じだとNode.jsで実装すると簡単そう。 メール受信をトリガ - NAVER まとめ メールをトリガーにした処理がかんたんにかけるNode.jsの「inbox」 - ayapi.github.io   inbox が内部で使っているencoding（のiconv-lite）がiso-2022-jpに対応してないので下記エラーが出る。 [Error: Encoding not recognized: 'ISO-2022-JP' (searched as: 'iso2022jp')] プロジェクト直下にiconvをインストールすると直る $ npm install iconv --save   メッセージ取得後はPHPにまるっとデータを渡したいので、child_process.spawnを使う。 Node.jsからPHPのプロセスを呼び出す - JSONでやりとり編 - Qiita   作ったのをGitHubで公開した。 DaikiSuganuma/node-gmail-watcher | GitHub config.jsを編集すると新着メールがきたときに実行するコマンドを変更できる。 常駐するには pm2 とか使う。   < Related Posts > nvmをUpgradeしてio.jsをInstall nginx + node.js + pm2でアプリ向けのREST API環境を構築 Google Apps Scriptで自動的にGmailのメールを定期的に削除

2年前にAlloyを試してみた けど、未だにClassicな書き方をしている私。そろそろAlloyも成熟してきたころだと思い調査したときの覚書。 環境：Titanium SDK 3.3.0.GA 私がクラシックな書き方をしている理由（言い訳）を考えてみた。 Alloyも結局クラシックなコードに変換している。だったら最初からクラシックな書き方でいいと思う WEB開発で複数言語（PHP, HTML, CSS, JavaScript）から開放されたと思ったのに、やっぱりXMLとかCSSっぽいのを書かないといけないの？ CommonJSの考え方でサーバー側（NodeJS）とクライアント側（Titanium）をJavaScriptで書いているのが気持ちいい Alloyにバグがあったら見つけるのも直すのも大変そう（まだAlloyを信用できない） クラシックだとひとつの画面はひとつのJavaScriptファイルで完結するので管理しやすい 今作っているアプリはサーバーと連携するクライアントアプリ。ビジネスロジックは全部サーバー側にあるので、MVCでいうところのViewをTitaniumで開発している感覚。さらにMVCで開発するほど大規模なアプリは今のところない。 自分の中で確立した書き方から脱却するのが億劫   世間ではAlloyで開発するべきだという意見が一般的。 Classic vs Alloy? | Community Questions & Answers | Appcelerator Developer Center ベストアンサーを日本語訳してみた Alloyは一般的な方法と統一したコードを提供する。これは他のAlloyプロジェクトの開発者や新規開発者が理解するのに容易。 Alloyは便利で役に立つたくさんのレイアウトショートカットを提供しているので、より早く開発することが出来る。我々のセールスチームは70％のコードを削減できた。これはたぶんベストな例だけど、Alloyアプリでたくさんのコード削減できる。 Alloyアプリは各プラットフォームに最適なコードと追加ツールを提供するのでクラシックなアプリよりも動作が速い。 Alloyは横長のアプリを作ったり、テーマを作ったり、再利用するコンポーネントを作るのに便利。これ...

Titanium Advent Calendar 2014 の8日目。最近多用しているthis, parent, childrenを使った書き方の紹介です。 環境： Titanium SDK 3.3.0.GA Alloyは使ってません。 これらを使うとループの中でクロージャ（無名関数）を作成する必要がなくなったり、「引数を使いまわしたいから無名関数でネストする」必要がなくなります。 メモリ効率的にもいいような気がします（実際は分かりません）。 例えばこんなコードがあったとします。 /ui/common/testView.js // Expose API exports.createView = createView; function createView(title) {     var frameView, buttonView, i;     frameView = Ti.UI.createView({         layout: 'vertical',         height: Ti.UI.SIZE     });     for (i = 0; i < 10; i++) {         buttonView = Ti.UI.createButton({             title: title + i         });         (function() {             var index = i; ...