はてなブックマーク

最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン

最近YouTubeの動画をWebサイトの背景として使う案件が増えており、何か手軽に実装できるプラグインないかなーと探していたら「jquery.mb.YTPlayer」というのにたどり着きました。 なかなか使いやすいプラグインだと思ったので、実装メモを残しておきます。 github.com ライセンス MIT / GPL スクリプトを読み込む クローンするなりzipで落とすなりしてください。 <script src="/js/vendor/jquery.mb.YTPlayer.min.js"></script> 動画を表示させる要素を追加 js-mainvisualVideo は任意のIDを入れてください。 data-property に設定を追記していきます。※後ほど説明します <div class="mainvisual"> <div class="mainvisual__video"

忘れないうちに「Socket.io」の使い方をメモ。 リアルタイム通信ができるので、ゲームやチャットアプリなどに使えそうですね。 今回は「Socket.io」を使用して簡易的なチャットアプリを実装してみました。 Expressインストール せっかくなので覚えたてのExpressを無駄に利用していくスタイル $ express chatapp -e からの $ npm install 以上。 不要なファイルやディレクトリを削除 EJSとかインストールしたけど別に使わなくていいので削除 routerも使わないので削除 ココらへんでExpressが全く必要がないことに気づくｗ chatapp/ ├ app.js ├ htdocs/ │ ├ css/ │ ├ index.html │ └ js/ └ package.json app.jsはhtdocsディレクトリ内のファイルをインクルードしてくる