Javascriptの最近のブログ記事

先日、2chの土日スレでゲームブックもどきを公開しました。

シナリオを作るとき、できるだけ思考の邪魔をせず視覚的に理解しやすい記述ができないかを模索した結果、mermaid.jsを使いました。
mermaid.jsはシーケンス図を描くのにはお世話になっているのですが、残念なことに条件分岐が多いフローチャートは得意ではないようで、あまり綺麗なグラフには。。。
で、今回さらにいろいろ模索した結果、普通にGraphviz(viz.js)が一番きれいなグラフが描けるという結論に(笑
どうせならエディタにしてしまおう、ということで作りました。

ゲームブックエディタ

ほんとはAceをエディタ部分に使いたかったのですが、日本語入力時にごみが出るので断念。
だれか対処法を知っている方教えてください。

このエディタで土日スレで公開したものを作り直して、CSSでちょっと味付けしました。

名もなきダンジョン

sColPic - Simple Color Picker

| コメント(0) | トラックバック(0)

Webサイト作りやゲーム作りなどで色が選ぶ時にカラーピッカーを使いますよね。
視覚的に色を選べるので大変便利なのですが、センスのない私には統一的な色選択ができなくて、いつも残念な配色になってしまいます。
そこで、一つのベース色を決めると同系色を自動生成するカラーピッカーを作りました。
これでセンスのない私でも、かっこいいものが作れる!!...はず。

20150725.png
sColPick - Simple Color Picker

コア部分を分離して、sDevEnvからも呼び出せるようにしました。
#の色指定や、RGBでの色指定をダブルクリックするとsColPicで色選択できます。
ベース色は記憶するので、一度決めてしまえば統一的な配色のサイトが作れます。

開発環境を謳うからには入力候補くらいは出さないとかっこがつか付きませんよね。
構文解析はしないので予め登録されたものしか選択できませんが、無いよりはましでしょう。(^^;
まだまだ登録語数が少ないので、自分で使いつつ入力候補を増やしていこうかな。


20150517.png
sDevEnv - Simple Development Environment


ちなみに、入力候補の表示方法の発想は下記からいただきました。

GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得

ライブラリ化しているようなので、それをお借りしようかと思ったのですがjqueryなのでやめました。

いやー、危うくスマホを投げ捨てるところだった。
俺はプログラムがしたいんであって、ソフトウェアキーボードの切り替えをしたいんじゃねぇ!!

っということで、改良しました。
比較的よく使う記号をショートカット?として表示するようにしました。
これで、キーボードの切り替え頻度が減って、プログラムに集中できるはず。

20150517.png
sDevEnv - Simple Development Environment

さてさてGWも終わりですが、みなさんいかがお過ごしでしょうか。
私はこんなものを作ってみました。

sDevEnv - Simple Development Environment

簡単に言うとjsdo.itの劣化コピー(^^;です。
HTML、CSS、Javascriptのオンライン簡易エディタですが、保存先はIndexedDBなのでプライベートとして利用できます。
プライベートすぎてPC間の共有もできませんが。。。
一応Export/Importを作ったので持ち運びはできます。

ちょっとしたコーディングをしたいけど開発環境を整えるのはめんどくさい、オンラインでほかの人に見られるのは恥ずかしい、出先でスマホでお手軽にコーディングしたいという場面に最適ではないでしょうか。

IE11、GoogleChrome42、Firefox37で動作することを確認しました。
おそらくIE10以前では一部の機能が使えないと思います、まあ、2016年1月にはほとんどサポートが切れるからいいよね。

ちなみに、まだこれを使ってコーディングしていないので、今度使い勝手を試してみよう。

CookieClickerが流行ってだいぶ経ちますが、みなさんはクリッカー病は治りましたか?
私は未だ完治していません(^^;
クッキーは作らなくなりましたが、似たようなゲームを見つけるとついついやってしまいます。
これをどうやって治すか。。。自分で作ってしまえ!!
作っている間のテストプレーをやりすぎて飽きるというよくあるパターン狙いです(笑)

JavaScriptでtextile

| コメント(0) | トラックバック(0)

最近Textileで文章を書く機会が増えてきたのですが、Textileなどの軽量マークアップ言語のすばらしさを改めて実感しています。

軽量マークアップ言語とはTextileやMarkdownに代表される文章の書き方、詳しくは Wikipedia を参照してください(^^;
Textileについては TxStyle :: Textile Documentation が参考になります(英語ですが)
最近はMarkdownの方が流行っている気もしますが、tableが気軽に使えるTextileがお気に入りです。

軽量マークアップ言語の魅力は、なんといってもHTMLよりも書くのが楽。
さらに私にとってHTMLは自由度が高すぎて、統一した文章構成で書き続けるということが難しいですが、Textileならそもそも自由度が低いのでそんな心配もありません。
唯一の問題点は、導入が大変なこと。
わざわざCMSを入れたり等、サーバ側でごにょごにょする必要があります。

なんとか簡単にできないものかと思って、作ってみました。

続き

ブラウザ版ダイアナさんのシャワールーム公開しました。

Play

実はだいぶ前に完成していたのですが、公開するのを失念(^^;
Android版を先行公開して満足しちゃってました。
ゲーム内容、操作性などAndroid版の完全移植!!
というか、Android版もJavascriptなので、そのままですが。。。
気軽に楽しんでください。

Android版もよろしくね。

どーしても摩擦の計算が気に入らなかったので、変更しました。

当然、正しい摩擦計算ができるわけないので、というか私には理解できないので、
めり込み補正力を利用して摩擦を計算。
現実にはありえない力ですが、それっぽく動いてくれました(^^

そのほかもちょろちょろ変更、だいぶ満足な動きになってきました。
容量はちょっと増えて14kB、だんだん増えてく。。。

あとはポルターガイスト現象(笑)をなんとかしたいなぁ。

20120410.png デモ

プログラムやってると、ふと物理演算エンジン作ってみたくなることがあるよね!!
ってことで作ってみました。

20120410.png デモ

できるだけシンプルになるよう作ったので、必要な機能もないかも(笑
物体が積み重なると震えがとまらないし、物体同士がめり込みすぎるし。。。
まあ、コア部分が12kBで作れたので満足です。
これでゲームでも作って、実用レベルだったらライブラリとして公開しようかな。

オリジナルゲーム

オンラインツール