vue.jsを勉強できる短いサンプルコードを触る

nippで色々やってやはりJavascriptや周辺のライブラリは便利だと改めて思った。

やはりリアクティブなUIライブラリが１つ使えると何を書くにも便利そう、vue.jsの勉強を再開した。

https://github.com/alephmelo/vue-github-api

手始めにvueを使ってgithubのapiを叩くサンプルコードを動かしてみた。

cloneしてindex.html開すだけであっさり動いてすごい。

※なんとなくmatthさんを検索してしまった、、

  • materialize.cssで見た目は調整
  • vue.jsはCDNから読み込み
  • app.jsのwatchでuserが書き換えられたらfetchDataメソッドが呼ばれる

短いので理解や改造も簡単。短くて役に立つサンプルコードを探すのは重要。

GitHubからスクリプトを読み込んでnippで実行する

ruby

経緯

nippは便利なのだが、一度URLを公開した後にスクリプトを修正すると再度URLを公開しないといけないのが面倒なときがある。

そこでgithubに置いたスクリプトを読み込んでnippにロードする仕組みを作った。(ほとんどnipp作者の @nwtgck さんが作ってくれた)

使い方

で、そのロード用のURLを作るためのnippを作った。例によってawesome-nippに置いてあるが、

感想

スクリプトをGitHubから読み込んでnipp上に展開するためにES2017を使っているのだが、

Opal.load('opal');
Opal.load('opal-parser');
(async ()=>{
  const gh = location.search.split("?")[1].split("=")[1];

  const res = await fetch(`https://raw.githubusercontent.com/${gh}`);
  const rbScript = await res.text();

　const e = document.querySelector("textarea[ng-model='inputText']");
  const $scope = angular.element(e).scope();
  $scope.script = await rbScript;
  $scope.transpiler = RubyTranspiler;
  $scope.enablePromiseWait = false;
  $scope.enableClickRun = false;
  $scope.enablePromiseWait = false;
  $scope.setLocationHash();
  $scope.transpile();
})();

こんな短いコードで書けて感動した。async await の便利さがよく分かった。

小さなWebアプリをサクサク作れるnippが面白い

ruby

極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiitaで紹介されていたnippで遊んでいる。

nwtgck.github.io

Rubyを使ったWebアプリを簡単に作ることができる。作ったものはURLさえ覚えておけば他の人とも共有できる。ちょっとしたテキストフィルターのようなものをRubyで書いて後で使いたい、他の人に公開したい、しかしデプロイするのは面倒というようなケースに便利。

とりあえずirbっぽく使えるevalを書いた。空行毎に結果を出力、テキストを書き換えるとリアルタイムで再計算してくれる。リファレンスマニュアルのサンプルコードを貼り付けて動かすのに便利。

eval - nipp

https://gyazo.com/f97db96c9b518dbe507e009e81415d7b/thumb/1000

作ったり見つけたものはawesome-nippに置いたので、nippで何か作ったり見つけた人は教えてください。

Twitter連携の再設定

【不具合に関する追記あり】Twitter API 開発者ポリシーに対応するため、Twitter連携の再設定をお願いいたします - はてなブログ開発ブログ

Twitter API 開発者ポリシーに対応するため、はてなブログのTwitter連携に変更を加えます。この影響で、2018年10月22日（月） 15:00-16:00 の間に現在の連携設定を全て解除します。そのため、ご利用の方にはTwitter連携設定を再度行っていただく必要があります。

最近ブログ記事のTwitter投稿が上手くいかなかったけどこれが原因だったのかな？試しに記事投稿してTwitterにも投稿してみる。

(追記) うまくいったっぽい

書評 - Scrapbox情報整理術

書籍 書評

Scrapbox情報整理術

Scrapbox情報整理術

最近はScarpboxをメインのメモツールとして使っていますが、ページをどのように分割するべきか、タグ(#テスト)とリンク([テスト])はどのように使い分ければいいのか、といった思想的な部分を学ばずにここまで来てしまいました。また最近のWebアプリはよくできているのでほとんどマニュアルを見ずに使えてしまいますので、本でも買わないとまとまった文章を読む機会がないというのもあります。

作者が全体としてScrapboxをどういう考え方で使っているのか、という少しぼんやりとしているけど大切な情報が手に入って満足しています。それは

  • Scrapbox内のページはできるだけ小さく細かい部品にしておく
  • 関連しているページがあれば文章内に(記述的に)リンクを貼る
  • 濃密なリンクネットワークを形成することで後から取り出しやすくなる

というところです。タグではなくリンクが大切、というのがかなり腑に落ちました。昔から一生懸命タグを付けるタイプでしたが確かにタグは意外と後から拾えないことが多いです。

Scrapboxはリンク支援機能([]の中でページ名を入力すると自動で補完が出る)、リンクを張ったページが画面下に表示されるためWikiなどと比べてリンクネットワークの形成が簡単かつ効果的だということも分かりました。

UserCSSやAPIの情報(実はページの履歴もAPIから取れることが分かったのは思わぬ拾い物)や、細かいところだとfaviconの変更方法が分かったのもうれしかったです。

本のおかげで後から情報を取り出しやすいメモページを作れそうです。

マルチメディアアプリケーションをスクリプトだけで簡単に作れるSivScript

この記事はOpenSiv3D Advent Calendar 5日目の記事です。

概要

SivScrtiptはマルチメディアアプリケーションをテキストエディタのみで簡単に開発できるソフトウェアです。 OpenSiv3D 0.3から導入されたAngelScriptによるスクリプト機能を利用して作られています。

  • exeをパスの通った場所にコピーするだけですぐに使える
  • ビルド無しで高速にリロード
  • VisualStudioやOpenSiv3Dのインストール不要
  • AngelScriptはC++と文法が似ているため簡単にC++に移植できる

インストール

  1. https://github.com/ongaeshi/SivScript/releases から最新のzipをダウンロード
  2. 展開してできたsiv.exeをパスの通った場所にコピー

使い方

以下のテキストをコピーして適当な場所にShape.asという名前のテキストファイルを作成します。

void Main()
{
   Window::Resize(640, 640);
   
   while (System::Update()) {
       for (int32 i = 0; i < 9; i++) {
           const Vec2 center(120 + i % 3 * 200, 120 + i / 3 * 200);
           Shape2D::Ngon(5, 80, center).draw();
       }
   }
}

コマンドラインから以下のコマンドを実行します。

$ siv Shape.as

実行画面が表示されます。コマンドラインから簡単に起動、ファイルを保存するたびに実行結果が変わっていくのが分かります。

f:id:tuto0621:20181204231243p:plain

その場で編集

アプリケーションを開いたままスクリプトファイルをエディタなどで編集します。すると自動でアプリケーションがリロードされ変更された結果をその場で確認することができます。

実際にやってみましょう。


SivScriptでリアルタイムプレビューしながらプログラミング

C++で開発するのと比べ、とても速いターンアラウンドで結果を確認することができます。

まとめ

最終的な実行結果とコードです。

f:id:tuto0621:20181204231340p:plain

void Main()
{
   Window::Resize(640, 640);
   double t = 0.0;

   while (System::Update()) {
       t += System::DeltaTime() * 0.2;

       for (int32 i = 0; i < 9; i++) {
           const Vec2 center(120 + i % 3 * 200, 120 + i / 3 * 200);
           Shape2D::Ngon(i + 3, 80, center, t)
               .draw(HSV(i * 80))
               .drawFrame(10, HSV(i * 80, 1.0, 0.7));
       }
   }
}

気軽にマルチメディアアプリケーションを作りたい、VisualStudioをインストールせずにOpenSiv3Dを触ってみたい、C++で本番アプリを書く前に軽く実験したい、などの用途に使いください。

RubyPicoをAppStoreに復活させました

rubypico

rubypico.ongaeshi.me