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

新作ゲーム「Liftikids」を公開しました。
もとは2chの土日スレで公開したものですが、ゲーム性を高めて再公開です。
ルールは簡単、マウスで青いバーを動かして液体を持ち上げるだけ。
ぜひ、プレーしてみてください。


Liftikids

EeePC 1000HEをChromiumOSで復活

| コメント(0) | トラックバック(0)
WindowsXPのサポート期限もあと数か月、時々思い出したように電気を入れて使っていたEeePC 1000HEもどうにかしないとと思っていたところ、最近ChromeBookが来だしているという記事を見かけました。
PCですることといえばネットサーフィンとメール、プログラミング!!
れらができれば十分なので、さっそくEeePC 1000HEでChromeOSのフリー版ChromiumOSを使ってみました。

JavaScriptでtextile

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

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

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

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

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

続き

サイトのユーザーインターフェースをデザインする上でちょっと困るのがtype=fileのinputタグだと思います。
ブラウザごとに見た目が違うし、CSSでも思い通りに変更できません。
ということで、挑戦してみました。

ポイントはinputタグを見えなくしlabelタグを装飾しているのですが、inputタグを"display:none"にしてしまうとOperaで動かなくなってしまうので、サイズを0にしています。
また、type=fileはFirefoxだとlabelタグクリックでは反応しないので、javascriptを使ってクリックイベントを発生させています。
ぶっちゃけこれのせいでlabelタグを使う必要性はなくなってますけどね(^^;
これでIE9、Chrome24、Firefox18、Opera12で動作しました。

オリジナルゲーム

オンラインツール

2017年4月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

最近のコメント