スズシンラボ by はてな

スズシンラボのサブブログ。主に更新通知用です。

Electron入門 開発環境の構築と最初のプログラム作成

Electron - HelloWorld

最近気になっているHTML5関連の技術。
特に、「Electron」にずっと関心があったのですが…。
今まで手を付けていませんでした。

今日は、何となくElectronの事が特に気になりましたので…。
せっかくの機会なので、Electron入門をしてみようと思い立ちました。

そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。
実際やってみると、そこまで難しいということはありませんでしたよ。
大体30分くらいで動作するところまでいけましたね。

今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。

JavaScript 数字大小予想ゲームHighOrLowを作成してみた

数字大小予想ゲーム HighOrLow

最近、私はプログラミングをするのが楽しくなってきました。
まだまだ大したものは作れませんが、それでも実際に動くものができるとうれしくなりますね!

今日も、昨日に引き続きJavaScriptのプログラミングをしてみました。
そして、またまたミニゲームを作成してみましたよ。
その名も「HighOrLow」です!

HighOrLowは、次に出る数字が大きいか小さいかを予想して当てるゲームです。
連続して何回当てられるかに挑戦します。

今回の記事では、HighOrLowの遊び方とその仕組みについて解説します。

JavaScript 数あてゲームHitNumber4を作成してみた

数当てゲーム HitNumber4

プログラミングをしていると、ツールを作成するのも良いのですが…。
私としては、やはりゲームを作ってみたいですよね〜。

そこで、今日はJavaScriptを使って、ちょっとしたミニゲームを作成してみました。
その名も「HitNumber4」と言います!

HitNumber4は、4桁の数字を当てる、いわゆる数あてゲームです。
数字が重複しない4桁の数字を、できるだけ少ない試行回数で当てるというものです。
実際やってみると、意外と難しいのですよね…。
適度に頭を使うので、ちょっとした脳トレにもなるかもしれませんよ。

今回の記事では、このHitNumber4の遊び方とその仕組みについて解説します。

JavaScript 簡易HTMLエスケープツールを作成してみた

簡易HTMLエスケープツール

前回の記事では、PHPを使ってシンプルなおみくじプログラムを作成してみましたが…。
さすがにこれくらいでは簡単すぎて物足りないですね。
そこで、今回はJavaScriptを使って、簡易版の「HTMLエスケープツール」を作成してみました。

このブログでもそうですが…。
技術系の話題を扱う時には、ソースコードを記事中に貼りたい場面というのはちょくちょくあると思います。
そんな時には、基本的にはソースコードをHTMLエスケープしなければなりません。
エディタで置換処理をする方法もありますが、それではなかなか手間がかかってしまいますよね。

そこで、今回作成したHTMLエスケープツールの出番です!
このツールを使えば、ソースコードを入力して変換ボタンをポチッと押すだけで、HTMLエスケープ処理済みのソースコードを取得することができますよ。
これなら、サクッと処理ができるので簡単ですよね。

今回の記事では、この簡易HTMLエスケープツールの使い方とその仕組みについて解説します。

ソースコードを綺麗に表示するライブラリhighlight.jsの使い方

highlight.js

技術系のブログを運営していると、プログラムなどのソースコードを掲載したいときがあります。
その際に、ソースコードをシンタックスハイライトさせると綺麗で読みやすくなりますよね。

highlight.js」は、そのシンタックスハイライトを実現するJavaScriptライブラリです。
これを使うことで、簡単にソースコードを綺麗に表示させることができます。

WordPressであれば、SyntaxHighlighter系のプラグインを導入すれば同じような事ができるのですが…。
高機能なのも相まって、処理が重くなる傾向があります。
私も色々なものを試してみましたが、やはり表示の遅さが少々気になっていました。

必要最小限のシンタックスハイライト機能かつ高速表示をしたいなら、highlight.jsで十分事足ります。
現在、私のブログではhighlight.jsを導入していますが…。
「表示が遅い!」というほど気になったことは特にありませんね。
個人的には、非常に満足していますよ。

今回の記事では、このhighlight.jsの導入方法とその使い方について解説します。

QuoteLinker: 引用リンクタグ作成ブックマークレット

QuoteLinker

今日は、ちょっとしたJavaScriptのプログラミングをしてみました。
簡単なブックマークレットを作成してみたのですよね。
せっかく作成したので、この記事で公開してみたいと思います。

今回作成したブックマークレット「QuoteLinker」は、引用リンクタグを簡単に作成してくれるものです。
引用リンクタグは、できるだけ正式なフォーマットで書こうとすると少々コードが長くなりますので…。
手書きで入力するのは、正直面倒くさいですよね。
それをブックマークレットを使って、サクッと自動でやってしまおうというわけです。

これも、以前作成したPageLinkerと同様に地味なのですが…。
そのパフォーマンスは抜群ですよ!
一度使えば、その便利さにハマると思いますよ。

PageLinker: ページリンクタグ作成ブックマークレット

PageLinker

今日は、ちょっとしたJavaScriptのプログラミングをしてみました。
とは言っても大したことはしていないのですけどね。
非常に簡単なブックマークレットを作成したのですよ。
せっかくなので、この記事で公開したいと思います。

PageLinkerと名付けた、このブックマークレットを使うと…。
今見ているページへのリンクタグをサクッと作成してくれます!
あなたがやることは、自動生成されたリンクタグをコピペするだけです。
一見地味ですが、これがあるのと無いのとでは作業効率が全然違いますよ。

もしもあなたが、今まで自力でリンクタグを設定していたのなら…。
このPageLinkerを使うことで、リンクタグを書くためにかかっていた時間を大きく省けるようになります。
ぜひこれからはPageLinkerを使いましょう!

※全文は以下のリンク先より。

PageLinker: ページリンクタグ作成ブックマークレット|スズシンラボ オフィシャルブログ