fkuMnkの投稿 - Crieit

ここにRyzen5の5600Gがあるじゃろ？

2022-08-16T15:46:16+09:00

仕様

チップ

AMD Ryzen5 5600G with Radeon Graphics

6Core 12Thread Processor

プロセッサー数値バトル

CPUの実行速度バトルに興味のある方は、PASS MARKのCPU Benchmarksなどでお好みのCPUを検索して数値バトルをお楽しみ頂けます。

解説

主にWebアプリケーション開発のための業務用PCとして組み立ててみました。

3年＋3年で合計6年間くらいの利用期間を想定しています。（※だいたい3年後くらいにメモリの増設、CPUおよびSSDの換装が行えるような構成になっています）

CPUはAMDのZen3アーキテクチャのうちGPUを内蔵したモデルを採用しました。上位にRyzen7の5700Gがあり、検討を重ねたのですが、目的とする実用性にRyzen5で問題がない事と、差額でキーボードが買えてしまう事実に抗えずヨドバシでKeychronを発注してしまいました。(これは本当に届くのかまだ不明です)

実行速度が必要十分であれば、CPUの価格帯を下げておくことで後日換装する際の精神的負担が少なくなるかもしれません。

同様にメモリ容量も16+16の32GBとし、さらに余裕を持たせて4スロットあるマザーボードを採用しました。6年前に8GBのメモリのマシンで開発していた事を考えると、6年後の一般的なメモリ容量を想像することはなかなか難しいです。

当初は最近話題のベアボーンキットを中心に9万円台で予算を見積もっていました。
このまま発注してもよかったんですが、このところのRyzenまわりの情報を調べているうちにだんだん面白くなってきてしまって、ぼくの考えたさいきょうのぱそこんごっこをしているうちに完成したのがこの記事の構成になります。

これは、筆者がパソコン工房(※今もなお現存しているPCショップのひとつ)の出身だったこともあるので、一般的にはベアボーンキットを選択するのが楽でいいとおもいますし、Windowsを主として利用する場合にはお買い得だったりもします。

参考に、下記は2例ともMinisforumですが、今回検討していたベアボーンキットの例です。

まとめ

いかがでしたか？

Macを買えばこのようなことは考えずに、直ちにコンピュータを使えるしスタバで開いてもカッコいいのでオススメです！！
Mac - Apple（日本）

もし本文を読んで触発されてしまった方がいましたら、KindleでDOS/V POWER REPORTを3年分くらい読んでから、中古PCかジャンクPCを分解して再度組み立ててみるのが良さそうです。ここまでやって、なんらかの夢が広がり始めたら恐らくこのような適性があるように思えます。近所のパソコン屋さんに相談したりしながらぜひ組み立ててみてください。

今年始めた知らん事 10選 2021

2021-12-29T13:08:58+09:00

今年も知らんことを色々やってみました。未知との遭遇。

これは、何も知らないしわからないので、個人的に実践してみた事の想い出報告です。
※組織内で知らん事をすると、いらん事すなと言われがちなので充分お気をつけ下さい。

もくじ
- Webアプリケーションを書くときにSvelteを使い始めた
- データベースにCloud Firestoreを使ってみた
- ソフトウェア開発の方針を準委任契約に切り替えた
- オンライン技術書読書会に参加した
- 技術コミュニティで仮想オンライン会場を使い始めた
- PHPerKaigiに参加してアンカンファレンスを立てた
- PHP Conference Japan 2021で知覚対応の限界に挑戦した
- 献血駆動開発を始めた
- エア帰宅(夕方頃に近所を歩き回る事)を始めた
- 電子レンジを買った

Webアプリケーションを書くときにSvelteを使い始めた

Svelteは、HtmlとかCSSとかJavascriptを一つのファイルにいっぺんに書いてなんやかんやするとWebアプリケーションができるやつの内の一つです。
ReactとかVueとかAngularとか、そういう感じの物といえます。
ドキュメントを読んで書いてみたら書けたので、そのまま試しに1週間くらいプロダクトコードを書き続けてみたら何かだいたい使えるようになりました。凄い！ありがとうございます。
公式サイトのチュートリアルもしっかりしているので、Webアプリケーション開発を学習する最初の一歩としても良さそうな気がします。

Svelte • Cybernetically enhanced web apps
Svelte • サイバネティクスで強化されたWebアプリ日本語翻訳版

データベースにCloud Firestoreを使ってみた

Cloud Firestoreは、Firebase（およびGCP）のサービスの一つで、SQLじゃない形式のデータベース的なサービスです。CollectionとDocumentという概念が交互に繰り返される構造になってて、ディレクトリとファイル的なOSのツリー構造っぽい感じになっています。
今回はGoogle AppEngineに設置したPHPアプリケーションから接続したんですが、ツリー的な構造に慣れてくるとわりと使いやすかったです。
あと、Collectionを一括で複製したいときはコードを書かないと出来ないので、コンソール上で簡単に複製できるようになればもっと便利かも。（※GCPでデータベース全体をプロジェクト間で移動する方法はある）

ソフトウェア開発の方針を準委任契約に切り替えた

これはまだ事例が少ないので結論的なものはまだ無くて、契約の主体が技術関係となって依頼側とも協力してソフトウェア開発を続ける概念が世間にもっと浸透していくといいなとおもっています。
現状では、協力関係を築いて維持していくための理解を得る、というコストがかなり高い実感を得ました。

オンライン技術書読書会に参加した

今年の2月から、技術書をオンラインで読む読書会、技術書読書会に参加し始めました。
これは、「プログラミング言語 Go」や「Effective Java 第3版」などの翻訳者である、柴田芳樹さんが主催している読書会で、だいたい月に1度Zoomミーティングで集まって、1冊の技術書を1ページずつ順番に音読しつつ内容についてディスカッションする集まりです。
柴田さんとは、10年ほど前にうちの近所のローカルテックカンファレンスへ講師として招聘させて頂いた時にお会いした以来だったので、世間にオンラインミーティングが浸透し始めたお陰？でこうして改めて参加する事ができました。
技術書を読み込むには、一人で落ち着いて読んだほうが理解はできるかな？とおもうところもあったんですが、複数人で集まると個人個人の着想や実体験に基づく感想をその場で共有できるので、本に書かれている事から連続したより広い部分まで学べるような感じがあるのには目から鱗でしたし、むしろ目が虚でした。
現在は「達人プログラマー第2版」を読み始めたところなので、ご興味のある方はぜひどうぞどうぞ。

技術書読書会 - connpass

技術コミュニティで仮想オンライン会場を使い始めた

うちは事務所の一室をテックコミュニティスペースとして使えるようにしていて、昨今集まれないのでとてもつらいよ... （※本当は特に辛くはないです。今集まらないのは合理的なので。）
でも我々はIT名人なので、技術で解決できるとおもいます。みたいな流れが2020年後半頃にありました。日本だと、RemoをはじめとしてSpatialChat、oViceなどが注目を集めるようになっていたかとおもいます。一方海外では、GDCRやChaos Computer ClubなどのイベントではGather、あるいはそれを元にしたシステムが使われていて、Twitterとかを見る限りめっちゃ楽しそうでした。
ということで今年の1月にCoderDojoのメンバーと一緒に使ってみたところ、とても体験が良かったのでそのままGatherでオンライン会場を作ってみました。
Gatherを選んだのはそれだけではなくて、Gatherで作ったスペースに来たひとたちが、これは良いぜとおもったら自分たちでもすぐにアカウントを登録してスペースを作れることと、作ったスペース同士を連結して、行き来することができるのがナイス！だと感じたところにあります。
みんなも使ってみよう！

※試しに毎週イベントを開いていたんですが、夏頃から仕事が大変になってきたので休止しています。仕事が大変にならなくても生活ができるようになったら再開したろ。

Gather | A better way to meet online.

PHPerKaigiに参加してアンカンファレンスを立てた

今年1月、TwitterでPHPerKaigiがオンラインで開催されるという情報を見て即チケットを申し込んだまま時は流れ、突然デカイ青い箱が物理で届く事が開催の幕開けの除幕となっていて驚きました。
なんか、開催中に開催の構造自体がアップデートされて、突然アンカンファレンス枠が爆誕する様子（ライブ感）を垣間見える事ができたのでとても良かったです。
プログラミングがあまり得意ではない事も有り、PHP界隈の陽のあたる場所にいる人々とはほとんど面識がなかったので、これは知らん人に紛れ込むチャンス！として、想い出アンカンファレンス登録をしました。
ちなみに、上記の技術書読書会、下記のPHP Conferenceも併せて、知らん人ばかりの集まりでしたので、人見知りのコンピュータGEEK個人開発者がこの状況で生き残るための生存戦略は、えっ？以前からいましたけど？みたいな雰囲気を見せつつ、知らん人が知らん人でなくなるまで存在し続ける事でした。
※重要な考察： これは生存者バイアスかもしれません。

PHPerKaigi 2021
参考：次回開催 PHPerKaigi 2022

PHP Conference Japan 2021で知覚対応の限界に挑戦した

今年9月、TwitterでPHP Conferenceが当日スタッフを募集しているという情報を見て即申し込んだら即返信が来て即10月になって、めでたく開催されました。
PHP Conference Japanは2020年もオンラインで開催されており、その時のライブ配信を見ながらDiscordサーバでなんか盛り上がっている感じが良かったのと、丁度予定が被っていなかったのでなんかナイスなタイミングで協力できたかとおもいます。
ブラウザを4画面表示して、4つのDicordチャンネルをリアルタイムで同時に追っていくのも初めての試みでした。Discordの使用は、ライブ視聴ではない参加者でも後から情報と雰囲気を追いやすくなる利点があるなあとおもいました。
あと、一般的な人類が同時に知覚・対応できる会話は一つ迄。

PHP Conference Japan 2021

献血駆動開発を始めた

献血駆動開発という言葉は存在しないので、適当に書きました。ご想像ください。
献血は、一度採血すると次の採血までに一定期間を要するんですが、そのうちの2週間くらい間をあけるタイプのやつを続けるようにしています。
これは、献血は出来ない人もいるという事と、胃腸炎とかの体調が回復して割と健康になった事と、定期的に献血ルームに出かけられないくらい忙しくなったらそれは段取りが破綻しているという目安になるのではという事と、普段は一人で虚無になって働いているところを献血ルームに行くと存在が肯定され次回もまた実在するぞという気持ちになれるからという理由での事となります。
体調の変化とかにも気をつけ安くなるかも。

ちなみに、注射はニガテではない方では無いです。

献血Web会員サービス「ラブラッド」｜日本赤十字社

エア帰宅(夕方頃に近所を歩き回る事)を始めた

エア帰宅という言葉も存在しないので、適当に書きました。ご想像ください。
外出時間が極端に減少したため、2020年頃から続く慢性的な運動不足の解消のために編み出されました。最初は室内で毎日1時間ほど適当に運動するというのを3ヶ月くらい続けてみたんですが、全く効果がなく、偶然にも乗っていたバイクが故障して中距離を歩いた時に気が付いた技です。
えっ？徒歩、歩けばできる。毎日歩けば良いのでは？的な。
ただ、目的なく歩くと職務質問されがちな実績があるので、だいたい夕方頃に仕事の一区切りを付けて、今から帰宅するぞ！という気持ちで近所を歩き回って戻ってきます。事務所で生活しているので。

電子レンジを買った

成人して以来、テレビ、車、電子レンジに興味をもたない哀れな人類として生きてきたんですが、なんか毎日パンに適当な野菜を挟んだやつをチンして食べたい機運が高まってきたので買いました。
ボタンを押してソワソワするだけで冷たいコーヒー牛乳が温かくなるので、人類は電子レンジを買うべき。

以上、10選です。10無かったらどうしようかとおもいましたが、数えたらあったので成立しました。

では、そろそろ凍りついたほうれん草を買いにでかけるので。
よいお年をお迎え下さい。

あっ、餅が！新年は餅がチンできるのでは！！餅さえあれば

Svelte、そのドキュメントは驚きの読みやすさ！的な。

2021-12-23T00:11:52+09:00

この記事は、Svelte Advent Calendar 2021の14日目の投稿が空いているのでは？とおもったので22日の夜にこれから書くぞとおもって勢いで登録した記事です。

Svelte、そのドキュメントは驚きの読みやすさ！的な。

これはSvelteという、JavaScriptとかHTMLとかCSSとかを一緒に書いたらWebアプリケーションになるやつ※について書かれている、実体験に基づいたドキュメンタリーです。

※ReactとかVueとかAngularが有名だよ

あらすじ

2021年3月、Vue歴三年(適当)、血の涙を流しながらVueを3にしてjQuery製のアプリケーションをリプレイスしたワイは、もうすでに限界が来とったんや。

新たなる力を求めて

精神に限界を感じたワイは、新たなる力を求めて自然とViteに手を伸ばしたんや。
そしたら、すぐさまボコボコにされた。なぜなら、ViteもVueと同じくEvan Youだったからなんや。
始祖Evan Youの何気ないAPI Referenceがワイの心を傷つけたんやなあ。※

※これはワイの知能がEvan Youのドキュメントパワーを下回っているからなんや。個人の感想なんやで。

Snowpack現る

神Referenceにボコボコにされながら薄れゆく意識の中でワイは見たんや、Comparisons with Other No-Bundler Solutions ... Snowpackと書いてあるのを。
命からがらViteのページを閉じ、Snowpackのページを開くことで安堵したワイは遂にそこで見てしまったんや、Getting Started with Svelteと書いてあるのを！！！

秘密なんや

ワイはそこでチビってしまった。何をチビッたのかは秘密なんやけどな。なぜなら、そこに書かれている通りに、GettingをStartedしたらSvelteとwithで、簡単にSvelteのロゴマークが画面に表示されてしまったからなんや。
衝撃が脳裏を駆け巡る。
そしてワイはGoing furtherした。

Svelte、それは新たなる宇宙域

西暦2021年4月、Going furtherしたワイはhttps://svelte.devに来ていた。※
※これは後から知ったが日本語訳サイトも存在する。皆はこっちも読もう！

ここでワイはTutorialを読んだ、読みふけった！！なぜなら半日くらいあったら読めるやろとおもって読んだら2日くらい掛かったからなんや。半分寝ながら読み続けた。お忙しい方々ならもっと掛かるかもしれん。それくらい手厚いTutorialになっとるんや。
ほんでな！ほんでな！画面の左側に書かれてある説明に沿って、画面の右上の画面にコードを書き込んでいくと、画面の右下の画面に結果が表示されるんや！！すごいやろがい！！

※ぜひ実際におためしください。https://svelte.dev/tutorial/basics

Svelte近接格闘術

タイトルに特に意味は無いんや、ちなみにSvelteはスベルトって読むんやで。しらんけど。
こうしてSvelteを身につけたワイはその月のうちに最初の業務アプリケーションを書き、その後もSnowpackで2つSvelteKitで3つのアプリケーションを世に送り出すことができたんや。
SvelteKitについて詳しくはここでは書かんで。なぜならViteを使うとるからな^^。

そのドキュメントは驚きの読みやすさ

Evan Youのドキュメントにボコボコにされ続けていたワイが、こうも短期間で立て続けにアプリケーションを世に出すことができたのはなんでなんやろか。
それは、おそらくsvelte.devのドキュメントが驚きの読みやすさだったからなんや。※
なんかしらんけど、読んで書いたら動くんや。動かんかったら、また読むんやで。
書けば書くほど動くようになるので、ワイも調子に乗って中高生向けにサンプルコードとかを作って嫌がられたりもした程なんや。良かったら試してな。
中高生に嫌がられた伝説のサンプルコード

中高生に嫌がられた伝説のサンプルコード REST-API編

※個人の感想なんやで。

個人の感想のまとめ

このようにSvelteはめっちゃ学習コストが低いんや。書いたら書いただけ動くしな！
そして、状態管理がめっちゃわかりやすいんや。『ワイでもわかる☆状態管理』なんやで。
でもな、Svelteはまだまだ秘められたポテンシャルが盛り盛りの発展途上プロジェクトなんや。
だからこれからも、皆でガシガシSvelteを書いて積極的に盛り上げていこうな！！

2021年12月22日ここに記す

SVELTE

CYBERNETICALLY ENHANCED WEB APPS

Svelte公式サイト

Svelte学習帳 PHP REST-API編

2021-06-11T06:41:05+09:00

Svelte学習帳 PHP REST-API編

概要

SvelteKitでWebアプリケーションを作ります
PHPでREST-APIを作ります
fetchで通信します
データベースに保存したり読み込んだりします

はじめに

これは、ローカル環境でREST-APIの練習をするサンプルコードです。
SveltKitで作成したWebアプリケーションに表示されているパラメータを、REST-APIでデータベースに保存します。

以前に投稿した記事「続・コードを書いてステータス画面を表示する」の続編になっています。

参考：続・コードを書いてステータス画面を表示する

動作要件

SvelteKitが動作すること
PHP ビルトインサーバーが動作すること
PHP Composerが動作すること

STEP00 準備します

ここでは2つのプロジェクトフォルダを作成します。

SvelteKitのプロジェクトを作成する

SvelteKitのプロジェクトを作成します。
ここではプロジェクト名を

svelte-rest-app

としています。

参考：SvelteKit • The fastest way to build Svelte apps

PHPプロジェクトを作成する

svelte-rest-appと同じ階層に

php-rest-app

というフォルダを作成します。

今回はPopcornというマイクロフレームワークを使用するので、Composerでインストールします。

参考：popphp/popcorn: Popcorn PHP REST Micro-Framework

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step00

STEP01 パラメータを取得する

Webアプリを作成して、アプリ内で使用するパラメータを取得する機能を追加します。

Webアプリを作ります

/svelte-rest-app/src/routes/index.svelte を開きます。
内容を消去して、Svelte REPLのサンプルコードに置き換えます。
サンプルコード：IamStronger • REPL • Svelte

パラメータ取得機能を作ります

scriptの内容に、fetchでパラメータを取得する機能を追記します。

参考：Fetch の使用 - Web API | MDN

Webアプリケーションに応答する機能を作ります

/php-rest-appフォルダに、publicフォルダを作成して、そこにindex.phpを作成します。

/php-rest-app/public/index.php

パラメータを返す機能をindex.php内に作ります。

get(
    '/params/',
    function () {
        // STEP01 ローカル環境間でのアクセスを許可します
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');

        $params = [
            'name' => 'name2',
            'lv'   => '12',
            'hp'   => '90',
            'mp'   => '10',
            'agi'  => '6',
            'tec'  => '3',
            'str'  => '10',
            'luc'  => '2',
            'text' => "I'm stronger2."
        ];
        echo json_encode($params);
    }
);


$app->run();

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

パラメータの内容が書き換わっていれば成功です。

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step01

STEP02 パラメータを送信する

パラメータ送信機能を作ります

/svelte-rest-app/src/routes/index.svelte を開きます。

scriptに送信機能を追記します。


// STEP02 送信結果を受け取る変数
let message = false;

// STEP02 fetchでパラメータを送信する機能
const saveParams = async () => {
    const serverURL = 'http://localhost:8080/saveparams';
    const response = await fetch(
        serverURL,
        {
            method: 'POST',
            mode: 'cors',
            credentials: 'omit',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name: name,
                lv: lv,
                hp: hp,
                mp: mp,
                agi: agi,
                tec: tec,
                str: str,
                luc: luc,
                text: text
            })
        }
    );
    message = await response.json();
}

送信ボタンを作ります

textareaの下にパラメータを送信するボタンを追記します




{#if message}
  

  {message.message}
{/if}

Webアプリケーションに応答する機能を作ります

/php-rest-app/public/index.phpを開きます

パラメータ送信に応答する機能を追記します。


// STEP02 CORS対応処理
$app->options(
    '/saveparams/',
    function () {
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');
    }
);

// STEP02 パラメータ送信に応答する機能を登録します。
$app->post(
    '/saveparams/',
    function () {
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');

        // STEP02 受信確認メッセージを返します
        echo json_encode(['message' => '受信しました']);
    }
);

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

SAVEボタンをクリックして、メッセージが返ってくれば成功です。

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step02

STEP03 パラメータを保存する

pop-httpをインストールします

/php-rest-appフォルダに移動します

今回はpop-httpというライブラリを使って、送信されたパラメータを受け取るのでComposerでインストールします。

参考：popphp/pop-http: Pop Http Component

データベースを準備します

/php-rest-app/public/index.phpを開きます。

フレームワークの準備処理の手前に、データベースを準備する処理を追記します。

// STEP03 データベースを準備します
$pdo = new PDO('sqlite:example.db');
$sql = <<< "SQL"
  CREATE TABLE IF NOT EXISTS config (
    param_id INTEGER PRIMARY KEY,
    params TEXT
  );
SQL;
$pdo->exec($sql);

参考：
- PHP: PDO::__construct - Manual
- PHP: PDO::exec - Manual

パラメータをデータベースに保存します

パラメータ送信に応答する機能として、リクエストデータを受け取ってデータベースに保存する処理を追記します。

// STEP03 pop-httpでリクエストデータを受け取ります
$request = new \Pop\Http\Server\Request();
$params = $request->getParsedData();
$encoded_params = json_encode($params);

// STEP03 リクエストデータを保存します
$sql = <<< "SQL"
  INSERT OR REPLACE INTO
    config(param_id, params)
  VALUES(1, :params);
SQL;

$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->bindParam(':params', $encoded_params);
$bool = $sth->execute();

$message = $bool ? '保存しました' : '保存できませんでした';

// STEP02 受信確認メッセージを返します
// STEP03 実行結果をメッセージとして返します
echo json_encode(['message' => $message]);

参考：
- PHP: PDO::prepare - Manual
- PHP: PDOStatement::bindParam - Manual
- PHP: PDOStatement::execute - Manual

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

SAVEボタンをクリックして、保存しましたメッセージが返ってくれば成功です。

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step03

STEP04 保存したパラメータを取得する

取得するパラメータをデータベースの値に切り替えます

/php-rest-app/public/index.phpを開きます。

パラメータ取得に応答する機能として、データベースから値を取得する機能を追記します。

// STEP04 データベースからパラメータを取得します
$sql = <<< 'SQL'
  SELECT param_id, params
  FROM config
  WHERE (param_id = 1);
SQL;

$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->execute();
$db_data = $sth->fetchColumn(1);

// STEP04 取得したパラメータを返します
// STEP04 取得した結果がnullのときは、デフォルトデータを返します
$params = json_decode($db_data) ?? $params;

参考：PHP: PDOStatement::fetchColumn - Manual

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

パラメータを変更してSAVEした後、ブラウザでアプリケーションを再読込します。SAVEしたパラメータが表示されれば成功です。

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step04

STEP05 練習する

これは、ローカル環境で練習するためのサンプルプロジェクトです。
実際のプロダクトでは、ここで使用したライブラリや手法を自由に扱えるようになるまで練習して得た経験を活用してみてください。

私家版：パソコンがゴェー！となったときに見るページ

2021-05-17T10:17:20+09:00

私家版：パソコンがゴェー！となったときに見るページ

システム、コマンド名は思い出せず、

ただ、祈るばかりです。

SystemRescue

SystemRescue - System Rescue Homepage

balenaEtcher

"Flash OS images to SD cards & USB drives, safely and easily."

balenaEtcher - Flash OS images to SD cards & USB drives

Linuxのデバイスを確認するコマンド

Linuxのデバイスを確認するコマンド | パソコン工房 NEXMAG

Buy

価格.com - 「買ってよかった」をすべてのひとに。

どちらをお使いになりますか？

openSUSE - Linux OS. どちらをお使いになりますか？

まとめ

お備え下さい。

Rclone syncs your files to cloud storage

続・コードを書いてステータス画面を表示する

2021-04-30T14:10:13+09:00

続・コードを書いてステータス画面を表示する

※この内容は、2021年5月1日・2日の二日間、Maker Faire Kyoto 2021に併せてオンライン開催される「子どもプログラミングパーク」の展示作品の一つとして書かれました。

総説

これは、Webブラウザに表示されたステータス画面の値を操作する、小さなサンプルコードです。
このガイドテキストに沿ってコードを書き進めていくことで、ステータス画面を作成し、コンフィグ画面でステータスの値を操作することが出来るようになります。

サンプルコード：objective-volhard-ktrfs - CodeSandbox

このガイドテキストを全て終えたプログラムは下記のようになります。

サンプルプログラム：IamStronger • REPL • Svelte

ガイドテキスト

このガイドテキストは次の3つのステップの順でコードを書き進めていきます。
- Step.1 ステータス画面を作る
- Step.2 スタイルシートを書く
- Step.3 コンフィグ画面を作る

各ステップごとのサンプルコードは、コピーして貼り付けても構いません。コードの内容をよく観察して、それぞれの関係について考えてみてください。

準備

サンプルコードを開いて、App.svelteファイルが表示されていることを確認します。

サンプルコード：objective-volhard-ktrfs - CodeSandbox

今回はこのApp.svelteファイルの25行目から下に書かれている内容を編集します。



Step.1 ここにステータス画面を作ります




Step.3 スタイルシートを書いたら、ここにコンフィグ画面を作ります



Step.2 ステータス画面を作ったら、ここにスタイルシートを書きます

編集したファイルを保存するには、コントロールキーを押しながらSキーを押す【Ctrl+S】か、メニューバーから【File】を選択して【Save】をクリックします。

このサンプルコードは自由に編集しても大丈夫です。ページを再読込すると、元の内容に戻ります。

Step.1 ステータス画面を作る

今回の目標はステータス画面を表示して、値を操作することです。

まずは、ステータス画面に表示される内容を、HTMLで書きます。



    
        {name}

        
    
    
        Lv: {lv}

        HP: {hp}/ {max_hp}

        MP: {mp}/ {max_mp}

        

        AGI: {agi}  STR: {str}

        TEC: {tec}  LUC: {luc}
    
    
        {text}

もし、ホームページを作ったことがあるなら、このコードを書きながら少し奇妙におもうかもしれません。bodyタグもhtmlタグも無いところに、突然divタグが始まっています。
でも心配はありません。今回はWebアプリケーションを作っています。そして、ここではこういった書き方ができます。

サンプルコードを書き終えると、このような画面になります。

Step.2 スタイルシートを書く

今回の目標はステータス画面を表示して、値を操作することです。

ステータス画面が、ステータス画面として見やすくなるように、スタイルシートで見た目を整える事ができます。

次のコードを、ファイルの一番下に書きます。

もし、ホームページを作ったことがあるなら、このコードを書きながら少し奇妙におもうかもしれません。ファイルの一番下に突然スタイルシートを書き始めて、cssファイルも読み込みません。

でも心配はありません。今回はWebアプリケーションを作っています。そして、ここではこういった書き方ができます。

サンプルコードを書き終えると、このような画面になります。

Step.3 コンフィグ画面を作る

今回の目標はステータス画面を表示して、値を操作することです。

作成したステータス画面の値を操作するために、コンフィグ画面を作ります。



    config

    name : 
    

    Lv : 
    

    hp: 
    mp: 
    

    AGI: 
    STR: 
    

    TEC: 
    LUC: 
    

    text :

もし、ホームページを作ったことがあるなら、このコードを書きながら少し奇妙におもうかもしれません。formタグもbuttonタグも無いし、valueの内容と画面に表示されている内容もぜんぜん違います。

でも心配はありません。今回はWebアプリケーションを作っています。そして、ここではこういった書き方ができます。

サンプルコードを書き終えると、このような画面になります。

レッツプレイ観察タイム

今回の目標はステータス画面を表示して、値を操作することです。

そして、これまでの3つのステップで、この目標は達成されました。

コンフィグ画面の値を操作して、ステータス画面の変化を確認してみてください。

ドキドキ改造タイム

今回書いたコードをおさらいします。



    
        {name}

        
    
    
        Lv: {lv}

        HP: {hp}/ {max_hp}

        MP: {mp}/ {max_mp}

        

        AGI: {agi}  STR: {str}

        TEC: {tec}  LUC: {luc}
    
    
        {text}
    




    config

    name : 
    

    Lv : 
    

    hp: 
    mp: 
    

    AGI: 
    STR: 
    

    TEC: 
    LUC: 
    

    text :

思いつく限り、自由に改造してみてください。

解説 Webアプリケーションフレームワーク

このサンプルコードはHTMLとCSSで書かれていますが、プログラム全体ではWebアプリケーションフレームワーク「Svelte」を使用しています。

App.svelteファイルの構成は、上から順に、JavaScript、HTML、CSSとなっており、一つのファイルの中に必要な機能と要素そしてスタイルをまとめて書くことが出来ます。

今回使用したSvelteには、実際に入力した内容を確かめながら学ぶことができるチュートリアルが用意されています。説明は英語ですが、短文で簡潔にまとめられているのでGoogle翻訳などで読んでも理解しやすい内容になっています。
このサンプルプログラムで興味をもったら、ぜひ試してみて下さい。

Hello world から始まります。

Introduction / Basics • Svelte Tutorial

今回使用したSvelteの他にも、世界では様々なWebアプリケーションフレームワークが日々改良を重ねています。

いますぐ自由に使えるものもいくつかありますので、実際に触って試してみて、自分にあったWebアプリケーションフレームワークを見つけてみてください。

真・コードを書いて画面内のキャラクターを動かす

2021-04-30T00:55:12+09:00

真・コードを書いて画面内のキャラクターを動かす

総説

これは、Webブラウザに表示されたキャラクターを動かすための小さなサンプルコードです。
このガイドテキストに沿ってコードを書き進めていくことで、画面上のキャラクターをキーボードで操作することが出来るようになります。

ガイドテキスト：コードを書いて画面内のキャラクターを動かす

このガイドテキストを全て終えたプログラムは下記のようになります。

サンプルプログラム：interesting-river-zyxg8 - CodeSandbox

解説・其の一フレームワークの助けを借りる

このサンプルコードはJavaScriptで書かれていますが、プログラム全体はHTML5のゲームフレームワーク「Phaser 3」を使用しています。

ここでは、キャラクターを操作するために player.setVelocityX や、player.anims.play を使いました。
これらはこの「Phaser 3」が持つ機能で、ゲームを開発するために必要な様々な機能が予め用意されています。

このようなフレームワーク、ゲームに特化したものは特にゲームエンジンとも呼ばれており、著名なものではUnityやアンリアルエンジンといったものが挙げられます。
このサンプルプログラムでは「Phaser 3」を使いましたが、世界にはまだまだ様々なゲームエンジンが存在しています。

いますぐ自由に使えるものもいくつかありますので、実際に触って試してみて、自分にあったゲームエンジンを見つけてみてください。

解説・其の二オンラインコードエディタを使う

このサンプルコードでは、Webブラウザに表示されたコードを編集してその場で実行結果を見ることが出来ました。

これは、オンラインコードエディタやオンラインテキストエディタなどと呼ばれているサービスで、ここでは「CodeSandbox」を使用しています。

オンラインコードエディタは、使用しているコンピュータに関係なくWebブラウザがあればコードを書いて実行することができます。自分でプログラミング環境を準備出来ない間は、このオンラインコードエディタで練習してみるのも良いと思います。

また、自分の書いたコードをScratchと同じように、動く状態で公開することが出来るので、誰かに自慢したり相談したり、一緒にコードを書いていくことが出来るようになります。身近に誰もいなくても、世界にはたくさんすごいのがいますからね。

すぐに使い始められるものを、いくつかここに紹介しておきました。実際にさわって確かめてみてください。

CodeSandbox: Online Code Editor and IDE for Rapid Web Development
- 今回使用したものです。HTML5やJavaScriptのコードを書くことができます。
Trinket
- CoderDojoのチュートリアルKataなどでよく使われているものです。PythonやJavaScriptのコードを書くことができます。※今回のサンプルコードはここでは動きませんでした。
CodePen: Online Code Editor and Front End Web Developer Community
- JavaScriptフレームワークやFlutterなどのコードを書くことができます。

コードを書いて画面内のキャラクターを動かす

2021-04-11T20:39:55+09:00

コードを書いて画面内のキャラクターを動かす

これは、Webブラウザに表示されているキャラクターをキーボードで操作するためのプログラムを書く、練習用のサンプルコードです。

Phaser3というHTML5のゲームフレームワークを使用してJavaScriptの条件分岐コードを書きます。

この内容は、Phaser3の公式チュートリアルを一部抜粋し、5月にオンライン開催が予定されている子どもプログラミング喫茶のメニュー向けに再編集されました。

参考リンク

準備

CodeSandboxにあるサンプルコードを、Webブラウザで開いて編集します。

【サンプルコード】silent-frost-z6iw0 - CodeSandbox

Game.jsファイルが表示されていることを確認します。

今回は、このGame.jsファイルの一番下に書かれているupdate()関数の内容を編集します。

update() {
    // レシピ Start

    // 1.もしカーソルキーの左が押されたら
    if (this.cursors.left.isDown) {
        // 1.1. プレイヤーが移動するためにX座標への速度を減らしたい
        // 1.2. プレイヤーが左に歩くアニメーションを付けたい
    }
    // 2. もし左ではなくカーソルキーの右が押されたら

    // 2.1. プレイヤーが移動するためにX座標への速度を増やしたい

    // 2.2. プレイヤーが右に歩くアニメーションを付けたい

    // 3. 何も押されていないときには

    // 3.1. プレイヤーが停止するためにX座標への速度を無くしたい

    // 3.2. プレイヤーが止まるアニメーションを付けたい

    // 4. もしカーソルキーの上が押されたとき、プレイヤーが地面にいるなら

    // 4.1. プレイヤーがジャンプするために、Y座標への速度を減らしたい

    // レシピ END
}

このサンプルコードは自由に編集しても大丈夫です。ページを再読込すると、元の内容に戻ります。

レシピ

1.もしカーソルキーの左が押されたら
- 1.1. プレイヤーが移動するためにX座標への速度を減らしたい
- 1.2. プレイヤーが左に歩くアニメーションを付けたい
- 1.3 コーディング観察タイム
1. もし左ではなくカーソルキーの右が押されたら
- 2.1. プレイヤーが移動するためにX座標への速度を増やしたい
- 2.2. プレイヤーが右に歩くアニメーションを付けたい
- 2.3 コーディング観察タイム
1. 何も押されていないときには
- 3.1. プレイヤーが停止するためにX座標への速度を無くしたい
- 3.2. プレイヤーが止まるアニメーションを付けたい
- 3.3 コーディング観察タイム
1. もしカーソルキーの上が押されたとき、プレイヤーが地面にいるなら
- 4.1. プレイヤーがジャンプするために、Y座標への速度を減らしたい
- 4.2 コーディング観察タイム
1. 改造タイム

1.もしカーソルキーの左が押されたら

if (this.cursors.left.isDown)

今回の目標は、画面に表示されているプレイヤーを動かすことです。

もし、カーソルキーの左【this.cursors.left】が、押されたら【isDown】...

1.1. プレイヤーが移動するためにX座標への速度を減らしたい

this.player.setVelocityX(-160);

プレイヤー【this.player】を左に移動させたいので、

X座標への速度【setVelocityX】を、減らします【(-160)】

1.2. プレイヤーが左に歩くアニメーションを付けたい

this.player.anims.play('left', true);

プレイヤー【this.player】に、

アニメーションを付けます【anims.play】

左に歩くときの【('left', true)】

1.3 コーディング観察タイム

コードを書いて動きを観察します。

// 1.もしカーソルキーの左が押されたら
if (this.cursors.left.isDown)
{
    // 1.1. プレイヤーが移動するためにX座標への速度を減らしたい
    this.player.setVelocityX(-160);
    // 1.2. プレイヤーが左に歩くアニメーションを付けたい
    this.player.anims.play('left', true);
}

2. もし左ではなくカーソルキーの右が押されたら

else if (this.cursors.right.isDown)

今回の目標は、画面に表示されているプレイヤーを動かすことです。

もし左ではなく、カーソルキーの右【this.cursors.right】が、押されたら【isDown】...

2.1. プレイヤーが移動するためにX座標への速度を増やしたい

this.player.setVelocityX(160);

プレイヤー【this.player】を右に移動させたいので、

X座標への速度【setVelocityX】を、増やします【(160)】

2.2. プレイヤーが右に歩くアニメーションを付けたい

this.player.anims.play('right', true);

プレイヤーに、アニメーションを付けます【anims.play】

右に歩くときの【('right', true)】

2.3 コーディング観察タイム

コードを書いて動きを観察します。

// 2. もし左ではなくカーソルキーの右が押されたら
else if (this.cursors.right.isDown)
{
    // 2.1. プレイヤーが移動するためにX座標への速度を増やしたい
    this.player.setVelocityX(160);
    // 2.2. プレイヤーが右に歩くアニメーションを付けたい
    this.player.anims.play('right', true);
}

3. 何も押されていないときには

else

今回の目標は、画面に表示されているプレイヤーを動かすことです。

ただし、左も右も押されていないとき【else】には...

3.1. プレイヤーが停止するためにX座標への速度を無くしたい

this.player.setVelocityX(0);

プレイヤーを停止させたいので、X座標への速度を無くします【(0)】。

3.2. プレイヤーが止まるアニメーションを付けたい

this.player.anims.play('turn');

プレイヤーに、アニメーションを付けます。止まるときの【('turn')】

3.3 コーディング観察タイム

コードを書いて動きを観察します。

// 3. 何も押されていないときには
else
{
    // 3.1. プレイヤーが停止するためにX座標への速度を無くしたい
    this.player.setVelocityX(0);
    // 3.2. プレイヤーが止まるアニメーションを付けたい
    this.player.anims.play('turn');
}

4. もしカーソルキーの上が押されたとき、プレイヤーが地面にいるなら

if (this.cursors.up.isDown && this.player.body.touching.down)

今回の目標は、画面に表示されているプレイヤーを動かすことです。

もしカーソルキーの上が押されたとき【this.cursors.up.isDown】、【&&】

プレイヤーが地面にいるなら【this.player.body.touching.down】…

4.1. プレイヤーがジャンプするために、Y座標への速度を減らしたい

this.player.setVelocityY(-330);

プレイヤーをジャンプさせたいので、

Y座標への速度を【setVelocityY】減らします【(-330)】

4.2 コーディング観察タイム

コードを書いて動きを観察します。

// 4. もしカーソルキーの上が押されたとき、プレイヤーが地面にいるなら
if (this.cursors.up.isDown && this.player.body.touching.down)
{
    // 4.1. プレイヤーがジャンプするために、Y座標への速度を減らしたい
    this.player.setVelocityY(-330);
}

5. 改造タイム

今回書いたコードをおさらいします。

// 1.もしカーソルキーの左が押されたら
if (this.cursors.left.isDown)
{
    // 1.1. プレイヤーが移動するためにX座標への速度を減らしたい
    this.player.setVelocityX(-160);
    // 1.2. プレイヤーが左に歩くアニメーションを付けたい
    this.player.anims.play('left', true);
}
// 2. もし左ではなくカーソルキーの右が押されたら
else if (this.cursors.right.isDown)
{
    // 2.1. プレイヤーが移動するためにX座標への速度を増やしたい
    this.player.setVelocityX(160);
    // 2.2. プレイヤーが右に歩くアニメーションを付けたい
    this.player.anims.play('right', true);
}
// 3. 何も押されていないときには
else
{
    // 3.1. プレイヤーが停止するためにX座標への速度を無くしたい
    this.player.setVelocityX(0);
    // 3.2. プレイヤーが止まるアニメーションを付けたい
    this.player.anims.play('turn');
}

// 4. もしカーソルキーの上が押されたとき、プレイヤーが地面にいるなら
if (this.cursors.up.isDown && this.player.body.touching.down)
{
    // 4.1. プレイヤーがジャンプするために、Y座標への速度を減らしたい
    this.player.setVelocityY(-330);
}

思いつく限り、自由に改造してみてください。

世界に貴方だけのとびっきりのわがままREST-API

2021-04-10T08:39:11+09:00

世界に貴方だけのとびっきりのわがままREST-API

以下、本質情報になります。

１，これを読みます。

popphp/popcorn: Popcorn PHP REST Micro-Framework

２，これをします。

Heroku での PHP アプリのデプロイ | Heroku Dev Center

３，できます。

おわります

知らん人と話す話・PHPerKaigi編

2021-03-28T20:51:03+09:00

知らん人と話す話・PHPerKaigi編

金曜日から三日間、知っているような知らないような人たちと、技術的なようなそうでないような話し合いをずっとコンピュータの前でしながら、一日中サク山をチョコ次郎をしていました。

子供の頃は知らないおじさんと話してはいけないよと言われて育ちますが、大人になれば大人です。
知らん人とも話しましょう。きっと向こうも知らないです。
互いの技の赴くままにがんばって！

PHPerKaigi 2021についてよう知らんけど記す

PHPerKaigi 2021

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

2021-02-20T20:03:15+09:00

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

米：この記事の有効期限：このコードは今は動くが、いずれ動かなくなる。2021年2月20日記す

まず背景として

うう... おれ、JavaScript、わからん。

ぜんぜん、わからん。

何がしたいのか？

Stylusのグローバル変数にVue CLIの環境変数が使えたら便利やろなあ...

結論

うう... おれ、なにも書けない、なにも出来ない。

出来た事だけ書く。

Stylusのグローバル変数が書かれたファイルを2つ用意した。ビルド用と、開発環境用にだ！
Vue CLIの環境変数が書かれたファイルを２つ用意した。ビルド用と、開発環境用にだ！
Vue CLIの環境変数にStylusのグローバル変数が書かれたファイルのパスを記述した
vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートした
yarn serveしたら開発環境用が、yarn buildしたらビルド用が！やったぜ！！

コード

Stylusのグローバル変数が書かれたファイル

これらはプロジェクトフォルダ内の任意の場所に置く

src/assets/stylus-global.styl


// .env.productionで呼び出されるファイル

HaikeiShoku = #cccccc

src/assets/stylus-global-development.styl


// .env.developmentで呼び出されるファイル

HaikeiShoku = #999999

Vue CLIの環境変数が書かれたファイル

これらはプロジェクトフォルダのルートに置く

.env.production


// yarn build したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global.styl'

.env.development


// yarn serve したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global-development.styl'

vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートする

これはプロジェクトフォルダのルートに置く

vue.config.js

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

App.vueとかどこかにグローバル変数を書いて試す

yarnでserveしたりbuildしたりして余韻に浸る。

vue.config.jsの補足

Yes! Good Look

このコードは動く。人類に未来が訪れる。

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

Oh! Not Work

これらのコードは動かない。人類は滅亡する。

FAIL

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

FAIL

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylusOptions: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

VERDAMMT!!

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [process.env.VUE_APP_STYLUS_GLOBAL],
        },
      },
    },
  },
};

参考文献

検証環境

package.json

{
  "name": "try-globalval",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.1",
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "prettier": "^2.2.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.3.1"
  }
}

key-mapperを使用したCapsLock大好きモードのご案内 (但しLinuxに限る)

2021-01-20T01:49:25+09:00

key-mapperを使用したCapsLock大好きモードのご案内 (但しLinuxに限る)

key-mapperを使うとkeyをmapperできます。
しましょう。

これは僕がkey-mapperを使って、Caps Lockキーを大好きになる物語です。
(但しLinuxに限る)

keyをmapperするのだ

key-mapperはGitHubにあるやつです。

GitHub - sezanzeb/key-mapper: An easy to use tool to change the mapping of your input device buttons.

各自でがんばってインストールしましょう。
ManjaroとArchとUbuntuとDebianの民は頑張らなくてもいいです。たぶん。

ぼくはopenSUSE Tumbleweedの民なのでがんばります。

これです。

頑張ればきっといつかは動くよ

諦めずに色々やってみるとたぶん動きます。動かなくても大丈夫です、諦めましょう。きっといつかもっと便利な世の中になるとおもいますよ。

なんかConfigファイルが空だとエラーになるのでJSON形式にしたり、ユーザーをinputグループに追加したり、再起動したりして動いたら動きます。RTFMしましょう。

key-mapper/usage.md at main · sezanzeb/key-mapper · GitHub

Caps Lock だぁい好き

Caps Lock キーはこれです。ぼくのCaps Lock キーはここにあります。ぼくはここに居るよォ。

皆さんのCaps Lock キーはどこにありますか？見つけたらぜひツイートしてくださいね。これは認識しなければ見つけることが出来ないとても珍しい物です。

さらばCaps Lock、そして永遠に…

ということで、奴の存在を消しましょう。
こうです。

henkan_modeをMappingしたので、日本語入力の切り替えキーになりました。わーい、ワイ、英語配列キーボード、やったぜ！！

あとは、ijklキーをそれぞれ↑←↓→キーとして移動する流派があると聞いたのでそうしました。CtrlともAltともバッティングしないので、システム全体でキモい操作がたぶん出来ます。やったぜ！！

動作環境

OS: openSUSE Tumbleweed
Desktop environment: KDE Plasma 5
Keyboard: ARCHISS AS-KBPD66/LRBK

オレLinux、Kindle読む。

2021-01-17T01:18:25+09:00

オレLinux、Kindle読む。

なんなのか？

オレ、Linux使う。Linux、Kindle無い。

ゎぃゎょゎぃ……

なぜなのか？

オレ、ぱそこん使う。ぱそこん、画面デカイ。

ぅゎぁっょぃゎ……

どうしたのか？

オレ、Genymotion使う。Genymotion、Androidの8.0作れる。

Genymotion Android Emulator | Cloud-based Android virtual devices | Develop - Automate your tests - Validate with confidence

オレ、OpenGApps使う。OpenGApps、x86のnanoで動く。

The Open GApps Project

Installing Open GAppss | Genymotion documentation

オレ、ARM-Translation使う。ARM-Translation、Kindle動く。

GitHub - m9rco/Genymotion_ARM_Translation: 👾👾 Genymotion_ARM_Translation Please enjoy！

ゎぃゎっょぃょぉ……？

どうなったのか？

ぱそこん、画面デカイ。老後、シアワセ。

ぃゃぁょぃゎぁ……

Linux上で動作しているKindleの様子

図鑑を拡大して文字を大きく表示した様子

動作環境

openSUSE Tumbleweed
VirtualBox 6.1
Genymotion Desktop 3.1.2
OpenGApps x86 8.0 nano

業務、棚に上げるくん（物理）

2020-12-16T01:44:54+09:00

業務、棚に上げるくん（物理）

こんにちは。
この記事はGYOMUハック/業務ハック Advent Calendar 2020 - Adventar 16日目の投稿です。

普段は一人でパソコンに向かって愉快に働いている実在する人物です。業務ハッカーとかハッカーでは無いんですけど、ハッカーっていう響きがカッコいいので参加しました。ブラインドタッチとかは得意です。先日なども触れては行けないキーをブラインドタッチ(ルビ：神の見えざる手)してフォルダは消え業務は遅延しました。助けて、業務ハッカー！！

本日の概要

今日お伝えする主な内容を以下にまとめました。

業務

ぱそこんで働いています。業務はここで執り行われ、世間に帰結します。

棚

本来であれば台所で使われるはずだった棚です。

上げる

上げます。 ☆SUCCESS!!

業務、棚に、上げるくん＼物理／

なぜなのか？

業務のこと

昨年までの業務スタイルは、ノートぱそこんを1個背負ってWi-Fiと電源を求めてさまよい歩く流しの行商スタイルで行っており、事務所があるのに事務所に居ない、何をやっているのかわからない場所がある、ゲストハウスはここですか？等と好評を得ておりました。

様々な場所でおもむろにPCを取り出して鉄の心で働いていくストロングスタイルだったので、いつの頃からか使用する機器も必然的に無線方式のものを多用するようになっていきます。

そして、時は西暦2020年…、世界は在宅の渦に包まれたッ！！

えっ、もう外に出て働かなくてもいいのか？　やったぜ！！

こうして、職は途絶え、衣食は尽き、PCは有線の渦に呑み込まれていった……

棚のこと

これは台所で使う棚です。ホームセンターなどで取り扱っている市販の物です。食器やら炊事道具やらを、上げたり下げたりできてとても便利な道具ですね。

そう、ここにさえ、来ることがなければ……

上げるくん

はい、上げました。このようにッ！！

まとめ

業務は一度棚に上げてみることで、心にも物理的にも余裕が生まれます。

この冬、みなさんも業務を棚に上げてみませんか？

棚に上げるとこんなにお得！

フックつきのカゴ
実行中のtanaにkagoをhookすることができます。

掃除道具
ゴミを掃除するはずの道具がゴミになる。そんなことってありませんか？でもカゴにしまえば大丈夫！ちなみに、こうやってご機嫌でキーボードの掃除をしている間にも、押してはいけないキーを押し、消えてはいけない物が消えていく…
これがこの世のさだめです。

隙間に差し込まれたキーボード
ご覧ください、ぱそこんを↑に上げる事によって本体のより近くで打鍵することができるようになるんですよ、本体にもキーボードがあるにも関わらずッ。

リストレスト
このように、最近のホームセンターなどのキッチンコーナーにはリストレストも並べられていますので、パソコン屋さんを求めて幾つもの街を渡り歩かなくても大丈夫な世の中になりました。

※文中でリストレストとして紹介されているものは食器洗浄用のスポンジです。リストレストとして使用されたものを誤って食器洗浄に使用されないようご注意ください。

おまけコーナー

ウルテクコーナー

これは、ご家庭にある長い棒状の物体に、洗面所などにある洗濯ばさみのような物でWebカメラを挟んでいる様子です。
あちらから、こちらは見えません。上げたり下げたり自由自在。ぜひお試し下さい。

告知コーナー

このように棚に上げられたマシンがバックヤードで大奔走するといわれているフルオンラインカンファレンス、

DojoCon Japan 2020 - Beyond the distance(距離を超えて) -

3つのオンライン会場での皆様のご活躍に期待しています。
真のHackerはここから現れるのかッ！？おたのしみに。

おわりにコーナー

いかがでしたし。

この記事はGYOMUハック/業務ハック Advent Calendar 2020 - Adventarの16日目の投稿でした。

ひきつづき、GYOMUハック/業務ハック Advent Calendarをお楽しみ下さい。

☆GCPのGCEでVNCのOBSしたやつは、やつの名は、openSUSE…!!

2020-12-12T10:06:10+09:00

☆GCPのGCEでVNCのOBSしたやつは、やつの名は、openSUSE…!!

はじめに

この記事はopenSUSE Advent Calendar 2020 - Adventarの12日目の投稿です。

このたび2年ぶりに参加をキメてみました。普段はDesktopでTumbleweedを使ってソフトウェアを書いたり書かなかったりしていますが、今回はGCP：Google Cloud Platrofmに関するお話をしたいとおもいます。

このお話は、先月11月28日にオンライン開催されたOSC福岡のライトニングトークセションで発表された資料から、クラウドコンピューティングに関する部分を詳解したものです。

なんなのか？

かいつまんで概要を解説しますと、昨今流行りのブロードキャスト映像配信システムをクラウドコンピューティングで実現してみたやつです。図で表すとこのような感じですね。

GCPが提供するクラウドコンピューティング、それはGCE：Google Compute Engineでワタシは4歳でした。
その味は甘くてクリーミィで、こんな素晴らしいCompute Engineを使えるワタシはきっと特別な存在なのだと感じました。

今ではワタシがオジイサン、インスタンスにあげるのはもちろんopenSUSE。
なぜなら、彼もまた特別な存在だからです。

なぜなのか？

補足しますと、Google Compute Engineというのは、クラウド上に仮想のコンピュータを作成して、インターネット経由で操作することが出来る仕組みを提供してくれるサービスです。たぶん。
で、作成された仮想のコンピュータのことをVMインスタンスみたいに呼びます。

※画像はイメージです。

インスタンスは仮想のコンピュータですので、OSが必要になりますよね。インスタンスにあげるのはもちろんopenSUSE。
なぜなら、彼もまた特別な存在だからです。

あるんかいないんかい

ということで、AMD Epyc CPUの搭載されたファンタスティックなインスタンスを作成しました。OSはもちろんopenSUSE、ブートディスクから接続されているイメージを変更してopenSUSEを選択しましょう。

そんな、ばかな……

ないんかい

最近ちょっと目が悪くなってきたのかもしれないのですが、見つからないです…。
昔はあったような気がするんですけど、選択できるOSが見つかりません。これではインスタンスを作成することが出来ないッ！一体どうすれば……

※注：この記事はopenSUSEアドベントカレンダーなので、openSUSEが見つからなければこの章で打ち切り未完丸投げ終了なんですが、皆様はぜひ親しみやすいOSを選択してご活用いただければ幸いです。

あるんかい

黒い画面「 ^ ^ ありまっせ」

コミュニティでサポートされるイメージ | Compute Engine ドキュメント | Google Cloud

ありました。

そう、よりオープンソースソフトウェア色の強いコミュニティサポートイメージとしてなぁッ！！

これをこうしてこうじゃ！

GCPは、ブラウザのコンソールからクラウドシェルっていう機能で黒い画面にgcloudというコマンドを入力することでも操作が出来ます。

なので、これをこうして、こうじゃぁあああ！！

gcloud compute disks create 作成するディスクの名前 --image-project=opensuse-cloud --image=opensuse-leap-15-2-v20200702 --type=pd-ssd --zone=ディスクを作成するゾーン --size=40GB

うまくいきおったら、冒頭のブートディスクに接続されているイメージを変更して、既存のディスクから作成したopenSUSEを選択できるようになっていますわい。

やったぜ！！

では早速起動してみましょう。

やったぜ！！これでyastし放題の心置きなくzypperできる、とびっきりのわがままインスタンスの完成ですね。

ゴエー！ブラウザで開くとフォントゴエー！！

ここから先は君たちの目で確かめてくれッ

ということで、ここから先はopenSUSEの話になりますので、GCPのGCEにあるopenSUSEを使って、自由自在にopenSUSEしてください。ありがとうございました。

―　完　―

おまけコーナー

上記のopenSUSEを、とびっきりのわがままopenSUSEして動画配信をしたときの様子は下記のとおりです。

こんな感じで、実際のオンラインカンファレンスの様子をリアルタイムで配信するシステムとして使われました。

https://youtu.be/r_DiQTWEOwc

予告編壱

上記内容の動画配信システムを作って配信する内容の電子奇書を技術書典10で頒布予定です。果たして原稿はあがるのか！？乞うご期待。

技術書典10

予告編弐

上記GCPのGCEに作られたAMD Epyc インスタンスで動作するファンタスティックopenSUSEが、バックヤードで大活躍するとまことしやかに囁かれているフルオンラインカンファレンス、DojoCon Japan 2020。

スタッフ一同鋭意開催準備中です。

2020年12月27日に、ご期待下さい。

DojoCon Japan 2020 - Beyond the distance(距離を超えて) -

いかがでしたか？

全然詳解されていないし、GCPの年収、最終学歴も公表されていないようです。調べてみましたが、結論はわかりませんでした！

気に入ったらぜひ、いいね、チャンネル登録、金塊送付をしてくださいね！

この記事はopenSUSE Advent Calendar 2020 - Adventarの12日目の投稿でした。

ひきつづき、openSUSE Advent Calenderをお楽しみ下さい。

なんかNinjaが活躍を報告してくれて嬉しい話

2020-12-12T09:48:50+09:00

なんかNinjaが活躍を報告してくれて嬉しい話

まず背景として

こんにちは。
この記事はCoderDojo Advent Calendar 2020 - Adventar 6日目の投稿です。
2年ぶりの参加となりますが、今回もCoderDojo紫雲での活動内容についてお届けしたいとおもいます。

※この文章はノリと勢いで一気にグワッっと書き綴ったので、後で恥ずかしくなって数カ月後くらいに加筆修正されるかもしれません。乞うご期待。

CoderDojo
The community of 2322 free, open and local programming clubs for young people
CoderDojo – 世界中の子どもたちがともに技術を創造し探求することを可能にします

時は西暦2019年末、愛知県名古屋市……

ちょうど1年ほど前に愛知県を舞台に開催されたDojoCon Japan 2019に、ぼくもスタッフとかチャンピオン相談員とかで参加しておりまして、その時の懇親会のライトニングトークで、やがてCoderDojoを離れていくNinjaたちのことについてお話しました。

年末から年度末に掛けては、一部の学生にとっては受験シーズンにあたり、出会いと別れの季節であったりします。たぶん。
NinjaたちのCoderDojoを離れていく理由についてはもちろん人それぞれの千差万別なんですが、成長につれて広がっていく社会的な世界に合わせて、自分たちの道を見つけながら逞しく進んでいってもらえれば、それはめっちゃ頼もしいやんけ！というふうにおもいます。

新しく入ってくるNinjaと、新しく始めたこと

ここからは、2020年に入ってCoderDojo紫雲で新しく始まったことと、変化について書いてみたいとおもいます。

Case1.デジタルグラフィックス

これまでも単発では絵を描いたりすることもあったんですが、継続的な取り組みが始まりました。ペンタブ持参でどんどん描き進めていくので、メンターとしては完成を見守るばかりですｗ

グラフィックツールの作法とか概念的なものが、最初は分かりづらかったりするので、レイヤを組み合わせるというようなデジタルツール側のアドバイスを行っています。最近は別のGameJamで教わったBlenderで立体オブジェクトの作成にも挑戦したりしていて、成長が著しいです。田舎あるあるの、周りに同じような興味を持つ仲間が見つからないというのが惜しいところですが、年齢が上がるに連れて使用できるオンラインサービスも増えてくるので、いずれはそこで活躍の場を見いだせることができるんじゃないかなーと期待しています。

主な使用ツール：Krita | デジタルでのお絵描きと創造の自由を

Case2.動画編集

まったく何も無い状態から、動画編集を始めてみたいっていう希望があったので、メンターとして取り組んでみました。持ち込みできるPCが無くて家庭でも共用ということだったので、ひとまずDojoのPCを使ってもらうことにして、動画編集の基礎中の基礎をKdenliveを使って体感してもらいました。上から下に映像と音声のトラックが重なってて、左から右に進む時間軸を切ったり貼ったりしながら操作して、一つの作品を生み出していくみたいなやつですね。
次回来るときには、編集してみたい動画を撮影して持ってきてねって約束して、持参してもらったんですけど、その時気がついたんですよね、お手持ちのその端末はiPodなのでは？ということに！ (※nanoではない)

その日からは、急遽予定を変更してiPodでできる方法を使っていつでも自由に動画編集ができる方法を探っていくことにしました。コンピュータは、人の持つ力を増幅させる装置でもあるので、使う人の身近にあって自由に使うことができる端末である方が自分自身のポテンシャルをより良く引き出すことができるんです。しらんけど。

誰かに届けるために作りたいという動機もあってか、開催回数の減少にも関わらず、その日以降の技術の向上には目覚しいものがありました。なんかちょっと良い話になりそうなので、これはここで以上です。

Case3.Scratchの次の道

Scratch、その次に。というやつです。これはある意味世界中のCoderDojoの業であり命題なのかも。ということで我々は何の考えもなく唐突にC#に突撃して三ヶ月の激闘の末、ボコボコに敗北しました。
いや、これは、言い訳をすると、ぜんぜん駄目だったわけじゃなく、チュートリアルを完了して、だいたい基礎も理解できたとおもったけど、気がついたら太平洋の真ん中を当て所もなく漂流してたっていう感じです。例えるならばッ！

では気を取り直して、もう少し近い道を探しましょう。太平洋横断とかではなくて、Scratchちょっと次の道、2つの道が見えてきました。1つ目の道は、GDevelop。これはブロック型ではないんですが、いろんな選択肢を選んだり組み合わせたりしてプログラミングしていく、オーサリングツール的なゲームエンジンです。最初はこれのチュートリアルを進めながら少しずつScratchから旅立っていきました。このままGDevelopを極めてもいいんですが、2つ目の道にも挑戦してみました。なぜなら我々にはもう残された時間がありません。受験勉強が控えているのです。

そんなこんなで、残された時間の2つ目の道は、Phaser3。これはHTML5を使った本格的なゲームエンジンです。ガリゴリとコードを書き続けることになるので、プログラミングぅって気持ちも高まることでしょう。しらんけど。
いろいろあって、限られた期間ながら、デザインスプリント的手法も取り入れつつ、最終試練シリーズ、「始まりと終わりのある遊べるゲーム」を作ることに成功しました。この成功を糧に、進み始めたエンジニアリング人生を逞しく生き抜いてほしいです。

Case4.オンラインCoderDojo

これはもう、文章が長くなってきたので省略したいくらいNinjaたちには不評でした。オンラインが駄目っていうよりは時世の変化の影響が強いです。
参加してるNinjaたちのシチュエーションに合わせたオンライン環境を運営者側でうまく用意することができれば継続していくことはできそうですね。

行動することで変化すること

大人はなんというか、ほしい物、必要な物があると、頑張って働いたりコツコツ貯金したりゴメンナサイしたりして買って手に入れますよね。では未成年の時はどうだったでしょうか。なかなか難しかったりしますよね。ぼくも道を踏み外して踏み抜きました。
さて、ここで回想には入らずに、ここ数年のお話なんですが、どうもNinjaの経験と成長に比例して、手持ちのデバイスが増えたりレベルアップしたりしてるんです。あれっ？髪切った？みたいな勢いで端末が新しくなるので、話題には事欠かないんですが、そういうことではなくて、とても大切なポイントです。

最初に、未成年欲しい物があっても一人ではままならねえ、みたいな事を書きました。Ninjaたち各家庭でどのような経緯があったのかを知る由はないんですが、一人ひとりの行動の積み重ねが、身近な人々の何かを動かしたことは間違いないでしょう。でももしかしたらやっぱ偶然かも。自信が無くなってきたので、この話は以上です。

Ninjaフォーエバー

CoderDojo紫雲は中学生が多いので、継続参加者向けのDiscordサーバを用意しています。みんな優しいので、ぼくがお知らせを通知しても、いつもそっとしておいてくれるんですが、志望校に合格したり、国家資格を取ったり、全国大会に出たりとかは、聞いてもいないのにガンガン投げつけてきてくれてとても嬉しいです。
わしがそだてた！　わしがそだてた！って言いたいので、これからも自分たちの道を広げながら、誉れを重ね続けていってほしいなあとおもいます。

あと、今月27日はお待たせしました起死回生の、無いかとおもった？やったぜ、ありますDojoCon Japan 2020 - Beyond the distance(距離を超えて) - フルオンライン開催が控えていますので来て。

明日は、CoderDojo Advent Calendar 2020 - Adventar の7日目です。たぶん。