Rails + JQuery + AjaxでCRUDのサンプルプロジェクト [Hello World]

cd ~/
mkdir myapp
cd myapp
rails new . --skip-turbolinks --skip-action-mailer --skip-action-mailbox --skip-active-storage --skip-test -d mysql

// JQuery
yarn add jquery
// 日付、時刻の操作(日本語対応)
yarn add date-fns
// FormDataをIEに対応させる
yarn add formdata-polyfill

const { environment } = require('@rails/webpacker')

// エイリアスの設定をする
environment.toWebpackConfig().merge({
  resolve: {
      alias: {
               'jquery': 'jquery/src/jquery'
             }
           }
});

module.exports = environment

// Gemfileに以下を追加してbundleする
gem 'bootstrap', '4.6.1'
 
// 手動で削除
app/assets/stylesheets/application.css
// 手動で作成
app/assets/stylesheets/application.scss
 
application.scssに次のコードをコピペする
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 
@import "bootstrap"

class Application < Rails::Application

  ・・・省略 ・・・
  
  config.time_zone = 'Asia/Tokyo'

  ・・・省略 ・・・

end

// メイン用
bin/rails g model jquery_crud_data name:string comment:text
// バックアップ用
bin/rails g model jquery_crud_data_bk name:string comment:text

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

JqueryCrudDatum.create(id:1, name: 'プチモンテ', comment: 'Ubuntu16.04にLazarusをインストールする [RADによる開発環境]',
                              created_at: '2020-02-26 13:37:12', updated_at: '2020-02-26 13:37:12')  
JqueryCrudDatum.create(id:2, name: 'プチモンテ', comment: '青色申告決算書 & 仕訳帳システム',
                              created_at: '2020-02-27 20:00:12', updated_at: '2020-02-27 20:00:12')  
JqueryCrudDatum.create(id:3, name: 'プチモンテ', comment: 'Rails6プロジェクトの各種初期設定',
                              created_at: '2020-02-28 05:30:12', updated_at: '2020-02-28 05:30:12')
JqueryCrudDatum.create(id:4, name: 'プチモンテ', comment: 'NginxにRoundcubeのWebメールシステムを導入する [CentOS]',
                              created_at: '2020-03-01 12:45:56', updated_at: '2020-03-01 12:45:56')                              
JqueryCrudDatum.create(id:5, name: 'プチモンテ', comment: 'ネットワークカメラを用いた顔認識及び人物特定システムの構築 [防犯カメラの自作]',
                              created_at: '2020-03-02 18:22:08', updated_at: '2020-03-02 18:22:08')   
JqueryCrudDatum.create(id:6, name: 'プチモンテ', comment: 'Android App Bundle(*.aab)でゲームをアップロード [Unity]',
                              created_at: '2020-03-03 22:28:00', updated_at: '2020-03-03 22:28:00')   
JqueryCrudDatum.create(id:7, name: 'プチモンテ', comment: '収縮と膨張によるノイズ除去のサンプルコード(2値画像用)',
                              created_at: '2020-03-03 23:30:11', updated_at: '2020-03-03 23:30:11')   
JqueryCrudDatum.create(id:8, name: 'プチモンテ', comment: 'JavaScriptでC/C++コードを実行してネイティブアプリのように高速にする [WebAssembly]',
                              created_at: '2020-03-03 23:47:52', updated_at: '2020-03-03 23:47:52')  
                              
JqueryCrudDataBk.create(id:1, name: 'プチモンテ', comment: 'Ubuntu16.04にLazarusをインストールする [RADによる開発環境]',
                              created_at: '2020-02-26 13:37:12', updated_at: '2020-02-26 13:37:12')  
JqueryCrudDataBk.create(id:2, name: 'プチモンテ', comment: '青色申告決算書 & 仕訳帳システム',
                              created_at: '2020-02-27 20:00:12', updated_at: '2020-02-27 20:00:12')  
JqueryCrudDataBk.create(id:3, name: 'プチモンテ', comment: 'Rails6プロジェクトの各種初期設定',
                              created_at: '2020-02-28 05:30:12', updated_at: '2020-02-28 05:30:12')
JqueryCrudDataBk.create(id:4, name: 'プチモンテ', comment: 'NginxにRoundcubeのWebメールシステムを導入する [CentOS]',
                              created_at: '2020-03-01 12:45:56', updated_at: '2020-03-01 12:45:56')                              
JqueryCrudDataBk.create(id:5, name: 'プチモンテ', comment: 'ネットワークカメラを用いた顔認識及び人物特定システムの構築 [防犯カメラの自作]',
                              created_at: '2020-03-02 18:22:08', updated_at: '2020-03-02 18:22:08')   
JqueryCrudDataBk.create(id:6, name: 'プチモンテ', comment: 'Android App Bundle(*.aab)でゲームをアップロード [Unity]',
                              created_at: '2020-03-03 22:28:00', updated_at: '2020-03-03 22:28:00')   
JqueryCrudDataBk.create(id:7, name: 'プチモンテ', comment: '収縮と膨張によるノイズ除去のサンプルコード(2値画像用)',
                              created_at: '2020-03-03 23:30:11', updated_at: '2020-03-03 23:30:11')   
JqueryCrudDataBk.create(id:8, name: 'プチモンテ', comment: 'JavaScriptでC/C++コードを実行してネイティブアプリのように高速にする [WebAssembly]',
                              created_at: '2020-03-03 23:47:52', updated_at: '2020-03-03 23:47:52')  

// 各テーブルの作成
bin/rails db:migrate
// 各テーブルの初期データの作成
bin/rails db:seed

bin/rails g controller jquery_crud_data index

Rails.application.routes.draw do
  
  # ルート
  root to: 'jquery_crud_data#index'

  get    'jquery_crud_data/index'  
  get    'jquery_crud_data/new',  to: 'jquery_crud_data#new',     as: 'new_jquery_crud_data'
  post   'jquery_crud_data',      to: 'jquery_crud_data#create'
  put    'jquery_crud_data/:id',  to: 'jquery_crud_data#update'
  delete 'jquery_crud_data/:id',  to: 'jquery_crud_data#destroy'
end

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title><%= "Rails + JQuery + AjaxでCRUDのサンプルプロジェクト" %></title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />    
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
            
    <%# jquery_crud.jsの読み込み %>
    <%= javascript_pack_tag 'jquery_crud' %>   
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-primary">
      <div class="navbar-brand text-white"><%= "Rails + JQuery + AjaxでCRUDのサンプルプロジェクト" %></div>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><%= link_to '全て初期化',  new_jquery_crud_data_path, class: 'nav-link',style: "color:#fff;" %></li> 
      </ul>       
    </nav>   
    <div class="container">
       <%= yield %>       
    </div>    
    <br>       
    <nav class="container bg-primary p-2 text-center">
      <div class="text-center text-white">
         JQuery "CRUD" Sample
      </div>  
      <div class="text-center text-white">       
        Takeshi Okamoto wrote the code.
      </div>  
      <p></p>      
    </nav>    
  </body>
</html>

<div id="root"></div>

class JqueryCrudDataController < ApplicationController
  before_action :set_datum, only: [:update, :destroy]
  
  # 英語のdataは複数形、datumは単数形
  
  def index
    @data = JqueryCrudDatum.all.order(updated_at: "DESC") 
    
    respond_to do |format|

        # HTML用
        format.html
        
        # JSON用
        format.json { render json: @data}
        
        # JSONは次のような形式となる
        #
        #  [
        #    {"id":1,"name":"プチモンテ"}
        #    {"id":2,"name":"プチラボ"}
        #    {"id":3,"name":"@ゲーム"}        
        #  ]        
    end
  end
  
  # 全て初期化
  def new
    
    ActiveRecord::Base.transaction do 
      # 高速削除
      ActiveRecord::Base.connection.execute("TRUNCATE TABLE jquery_crud_data;")
      # 高速挿入
      ActiveRecord::Base.connection.execute("INSERT INTO jquery_crud_data SELECT * FROM jquery_crud_data_bks;")
    end  
  
    redirect_to root_path
  end
    
  def create
    @datum = JqueryCrudDatum.new(datum_params)

    respond_to do |format|
      if @datum.save
        format.json { render json: {registration: "Ajaxによるデータの登録が成功しました。", 
                                    id:  @datum.id, name:  @datum.name, comment:  @datum.comment, updated_at:  @datum.updated_at} }
      else
        format.json { render json: {registration: "Ajaxによるデータの登録が失敗しました。", 
                                    id:  "error"} }
      end
    end
  end
  
  def update
    respond_to do |format|
      if @datum.update(datum_params)
        format.json { render json: {registration: "Ajaxによるデータの更新が成功しました。"} }
      else
        format.json { render json: {registration: "Ajaxによるデータの更新が失敗しました。"} }
      end
    end
  end  
  
  def destroy
    respond_to do |format|
      if @datum.destroy
        format.json { render json: {registration: "Ajaxによるデータの削除が成功しました。"} }
      else
        format.json { render json: {registration: "Ajaxによるデータの削除が失敗しました。"} }
      end
    end
  end
    
  private
  
    def set_datum
      @datum = JqueryCrudDatum.find(params[:id])
    end
      
    def datum_params
      # 送信側のJSONの形式を確認する事！
      params.require(:datum).permit(:name, :comment)
    end
end

class JqueryCrudDatum < ApplicationRecord
  validates :name, length: { maximum: 20 }, presence: true
  validates :comment, length: { maximum: 140 },  presence: true
end

import "jquery";

// 日時操作
import {format} from 'date-fns';
import ja from 'date-fns/locale/ja';

// IEのFormData対策用
import 'formdata-polyfill'

// ------------------------
//  状態管理
// ------------------------
var state ={
      items: [],    // アイテム
      mode: [],     // アイテムのモード(表示/編集)
      name: '',     // 投稿 - 名前
      comment: '',  // 投稿 - コメント       
      status: 'ここに「Ajax」に関するメッセージが表示されます。'     
};

// ------------------------
//  イベント
// ------------------------

// データの変更(name)
window.handleNameChange = function(event){
  state.name = event.target.value;
  event.preventDefault();   
}

// データの変更(comment)
window.handleCommentChange = function(event){
  state.comment = event.target.value;
  event.preventDefault();   
}

// 表示モード/編集モードの切り替え
window.handleModeChange = function(index, event){
  var html = '';
  
  state.mode[index] = !state.mode[index];  
  if (state.mode[index])
    html += htmlCardEdit(index);
  else
    html += htmlCardShow(index);
  
  // 一部のみ更新
  $("#card" + state.items[index].id).html(html);  
  
  event.preventDefault(); 
}

// データの登録
window.handleInsert = function(event){
  
  if (state.name && state.comment){
    
    // Ajax
    run_ajax("POST",
             "http://localhost:3000/jquery_crud_data/" ,
             {datum: {name: state.name, comment: state.comment}}
            );
                                              
    state.name = '';
    state.comment = '';
  }  
  event.preventDefault();   
}

// データの更新
window.handleUpdate = function(index, event){
  var form_data = new FormData(event.target);
  
  var txt_name = form_data.get('txt_name');
  var txt_comment = form_data.get('txt_comment');
      
  if (
      (txt_name && txt_comment) &&
      (!(state.items[index].name == txt_name && 
         state.items[index].comment == txt_comment))
     ){      
    
    // 値の設定
    state.items[index].name  = txt_name;
    state.items[index].comment  = txt_comment;
    state.items[index].updated_at  = new Date();
    
    // 表示モードに変更する
    state.mode[index] = !state.mode[index]; 
    
    // Ajax    
    run_ajax("PUT",
             "http://localhost:3000/jquery_crud_data/"  + state.items[index].id ,
             {datum: {name: txt_name, comment: txt_comment}}
            );
  }  
  
  // 一部のみ更新
  $("#card" + state.items[index].id).html(htmlCardShow(index));   
  event.preventDefault(); 
}

// データの削除
window.handleDelete = function(index, event){
  
  // Ajax
  run_ajax("DELETE",
           "http://localhost:3000/jquery_crud_data/"  + state.items[index].id ,
            {}
           );

  state.items.splice(index, 1);
  state.mode.splice(index, 1);
    
  // すべて再描画
  $("#root").html(render());
                     
  event.preventDefault(); 
}

// ------------------------
//  関数
// ------------------------

// サニタイズ
function htmlspecialchars(str){
  
 return (str + '').replace(/&/g,'&')
                  .replace(/"/g,'"')
                  .replace(/'/g,''')
                  .replace(/</g,'&lt;')
                  .replace(/>/g,'&gt;'); 
}

// Ajax
function run_ajax(method, url, data){
  
  $.ajax({
      url: url,
      method: method,
      data: JSON.stringify(data),
      headers:{
        // JSON
        'Content-Type': 'application/json',
        // CSRFトークン
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
      
  }).done(function(data, status, xhr) {
      
      // 新規登録時のみIDなどが返却される
      if(data.id){
        
        // 失敗
        if(data.id == "error"){
          
          // エラー制御は行っていないので各自で。
          
        // 成功  
        }else{
          // 先頭にアイテムを追加する 
          state.items.unshift({id: data.id,
                              name: data.name,
                              comment: data.comment,
                              updated_at: data.updated_at}
                             );    
          state.mode.unshift(false);          
    
          // すべて再描画
          $("#root").html(render());                
        }
      // 更新/削除
      }else{
        // エラー制御は行っていないので各自で。
      }  
      
      $("#status").html(htmlspecialchars("サーバーからのメッセージ(" + 
                                         formatConversion(new Date())  + ") ：" + data.registration
                                         ));      
      
  }).fail(function(xhr, status, error) {
       $("#status").html(htmlspecialchars(error))
  });  
}

// 日付操作
function formatConversion(updated_at) {
  
  return format(new Date(Date.parse(updated_at)), 'yyyy年MM月dd日(iiiii) HH:mm:ss', {locale: ja});
}
    
// 表示モード    
function htmlCardShow(index){

  return  '  <div class="card-header">' +
          '    '+ htmlspecialchars(state.items[index].name) +' <br />' + formatConversion(state.items[index].updated_at) +
          '  </div>' +
          '  <div class="card-body">' +
          '    ' + htmlspecialchars(state.items[index].comment) +
          '    <br>' +
          '    <br>' +
          '    <form>' +
          '      <div style="text-align:right;">' +
          '        <input type="submit" value="編集" class="btn btn-primary" onclick="handleModeChange('+ index +', window.event);" />&nbsp;' +
          '        <input type="submit" value="削除" class="btn btn-danger" onclick="handleDelete('+ index +', window.event);" />&nbsp;&nbsp;' +
          '      </div>' +
          '    </form>' +
          '  </div>';
}

// 編集モード
function htmlCardEdit(index){

  return  '  <form onsubmit="handleUpdate('+ index +', window.event);">' +
          '    <div class="card-header">' +
          '      <input type="text" value="'+ htmlspecialchars(state.items[index].name) +'" name="txt_name" class="form-control" />' +
          '    </div>' +
          '    <div class="card-body">' +
          '      <textarea name="txt_comment" class="form-control" rows="5" >' + htmlspecialchars(state.items[index].comment) +'</textarea>' +
          '    </div>' +
          '    <div style="text-align:right;">' +
          '      <input type="submit" value="キャンセル" class="btn btn-secondary" onclick="handleModeChange('+ index +', window.event);" />&nbsp;' +
          '      <input type="submit" value="更新" class="btn btn-primary" />&nbsp;&nbsp;' +
          '    </div>' +
          '    <p></p>' +
          '  </form>';        
}

// レンダー
function render(){
  
  var html = '';
  
  html =  '<p></p>' +
          '<div class="fixed-bottom bg-dark text-white" style="opacity: 0.55">' +
          '  <span>&nbsp;</span>' +
          '  <span id="status">'+ htmlspecialchars(state.status) +'</span>' +
          '</div>' +
          '<h3>投稿</h3>' +
          '<p></p>' +
          '<form onsubmit="handleInsert(window.event);">' +
          '  <input type="text" class="form-control" placeholder="名前" onchange="handleNameChange(window.event);" />' +
          '  <textarea class="form-control" rows="5" placeholder="コメントを入力します。" onchange="handleCommentChange(window.event);" />' +
          '  <input type="submit" value="登録" class="btn btn-primary" />' +
          '</form>' +        
          '<p></p>' +  
          '<h3>一覧</h3>' +
          '<p></p>' + 
    '<div class="card-columns">';
      
      // 各カード    
      for(var i=0; i<state.items.length;i++){
        
         html += '<div class="card" id="card'+ state.items[i].id +'">';
         
           if (state.mode[i])
             html += htmlCardEdit(i);
           else                       
             html += htmlCardShow(i);
             
         html += '</div>';   
      }  
  
  html += '</div>';
  
  return html; 
}

// ------------------------
//  メイン
// ------------------------
$(function() {
  
  // JSONデータの取得
  $.ajax({
      url: "http://localhost:3000/jquery_crud_data/index.json",
      method: "GET",
  }).done(function(data, status, xhr) {
      
      // リストデータ
      state.items = data;
      
      // モードの初期化(全て表示モード)
      for(var i=0;i<data.length;i++){
        state.mode[i] = false;
      }
            
      // レンダー  
      $("#root").html(render());
      
  }).fail(function(xhr, status, error) {
      alert(error)
  });
  
});

ピックアップ

Stable Diffusionのインストール方法(AUTOMATIC1111)【初心者/AIイラスト/画像生成AI/Windows/誰でもAI絵師になれる】

最新の記事

 音楽・DTM・作曲  2024年05月08日
KOMPLETE(総合音源)の評価、活用、安く買う方法 [STANDARD/ULTIMATE 14/15/16 半額セール]
 Windows  2023年11月11日
デュプリケーターでSSD/SSD換装(OS丸ごとクローン)[LGB-2BDPU3ES/LHR-2BDPU3ES]
 Python・人工知能・Django  2023年08月05日
複数の範囲にオブジェクトを指定する【Stable Diffusion Web UI】
 Python・人工知能・Django  2023年08月03日
高画質の美少女、動物、風景を作成する【Stable Diffusion Web UI】
 Python・人工知能・Django  2023年07月30日
画像サイズの自動設定(ワンクリックで変更)【Stable Diffusion Web UI】

人気の記事 (毎週月曜日～)

1位	Ruby on Rails 6.xから7.0.xへアップグレード [エラー解決/移行ガイド]
2位	Apache/MariaDB/PHPとphpMyAdminのインストール [WSL/Ubuntu環境]
3位	レンタルサーバーでRuby on Railsを動かす？ [デプロイ]
4位	Active StorageのダウンロードURLを変更する[/rails/active_storage/blobs]
5位	Active Storageを使用して添付ファイル(アップロード)を簡単に管理する
6位	開発環境でHTMLの空白、改行を削除しないようにする [Slim / Rails]
7位	Pumaがメモリを大食いするのを防ぐ [puma_worker_killer]
8位	Nginx/Rails/PHPにFastCGIでPerl/Pythonを共存させる [CentOS]
9位	Nginx + Unicornで複数のRailsプロジェクトを実行する [CentOS]
10位	Vuexの使い方 [Rails]
11位	Vue Routerの使い方 [Rails]
12位	RailsでVue.jsの開発を行う [単一ファイルコンポーネント/Hello Wolrd]
13位	Rails + JQuery + AjaxでCRUDのサンプルプロジェクト [Hello World]
14位	Rails + Vue.js + AjaxでCRUDのサンプルプロジェクト [Hello World]
15位	Vue.jsをIE11に対応させる [Rails6]
16位	Rails6にVue.jsを導入する
17位	Uncaught TypeError: $(...).toast is not a function [Rails/bootstrap]
18位	Rails + React + AjaxでCRUDのサンプルプロジェクト [Hello World]
19位	ReactをIE9/10/11に対応させる [Rails6]
20位	Active Storageを使用して添付ファイル(アップロード)を簡単に管理する [複数ファイル対応版]

作詞・作曲(オリジナル曲)

Webアプリ

このブログのマスターが作成した無料ツールです。

 Free  疾風 - ときかぜ - (オープンソース)
ブラウザで写真などの画像を編集する

 Free  PDFデザイナー (オープンソース)
ブラウザでPDFファイルを編集(結合、分割、抽出、回転、しおり等)する

 Free  複数画像のPDF変換
ブラウザで複数の画像を1つのPDFファイルにまとめる

 Free  PDFのテキスト変換
ブラウザでPDFファイルをテキストに変換する

 Free  PDFの画像変換
ブラウザでPDFファイルを画像に変換する

 Free  Exifの確認と削除 (オープンソース)
カメラで撮影した画像ファイル(JPEG)に潜むGPSなどのExif情報を確認、削除する (ブラウザ/スマホ対応)

 Free  エクセルのCSV変換
ブラウザでエクセルをCSVに変換する(一括変換も可能)

 Free  GIFアニメの作成 (オープンソース)
ブラウザで画像からGIFアニメを作成する

 Free  動画のGIFアニメ変換
ブラウザで動画ファイルをGIFアニメへ変換する

 Free  アイコンエディタ
ブラウザでアイコンを作成、読み込み、編集する

 Free  複数画像のAVI変換 (オープンソース)
ブラウザで画像/音声を動画ファイル(AVI)に変換する

 Free  Webカメラ動画変換
ブラウザで映像/音声を動画ファイル(AVI)に変換する

 Free  音声形式の変換 (オープンソース)
ブラウザでMP3/OGG/AAC/FLAC/WAVなどの音声ファイルをWaveファイルに変換する

 Free  Waveファイルで効果音作成 ♪
ブラウザでWaveファイルの効果音を作成する

 Free  Waveフォーマット変換 (オープンソース)
ブラウザで8/16/24/32bitの相互変換。サンプリング周波数、チャンネルを変更する

 Free  音声の結合 / 抽出 / 削除 (オープンソース)
ブラウザでWaveファイルを結合、抽出、削除する

 Free  Waveファイルの解析 (オープンソース)
ブラウザで全体の波形、再生時間、ビットレート、WaveFomat構造体を解析して表示する

 Free  波形データと周波数スペクトル
ブラウザでマイクやパソコン内で流れている音声、MP3/OGG/WAVなどのファイルの周波数を解析する

 Free  双2次フィルタ(BiquadFilter)
ブラウザで音声の特定周波数をカット/増幅/減衰する

 Free  絶対音感
ブラウザでマイクやパソコン内で流れている音声のドレミなどの音階をリアルタイムに表示する (スマホ対応)

 Free  音声録音くん
ブラウザでマイクやパソコン内で流れている音声をMP3/WAVE形式で保存する

 Free  iResEditor (オープンソース)
ブラウザでEXE/DLLファイルのリソースを編集する

 Free  Webの逆アセンブラ
ブラウザでEXE/DLLファイルを逆アセンブルする

※その他にも「プチラボ」でアプリを多数公開しています。

3Dゲーム

このブログのマスターが作成した無料ゲームです。

短時間で遊べるファンタジーのオンラインRPG風

ほのぼの癒し系のスマホアプリ

パズルゲーム

ナンプレのドン！

スマートフォン

このブログのマスターが作成したアプリです。

お主の画像減色 カメラの写真や画像ファイルを「高品質に減色」する

お主は誰だ。 AI(人工知能)が「あなたの顔はどんな芸能人、有名人に似てるか」を判定する顔診断アプリ (女性向け)

AI(人工知能)

おもちゃのAI研究室 イラストの自動着色などのAIアプリの研究室(学習用)

めえめえ(自動作曲システム) ブラウザで歌詞を入力するだけで自動作曲する(簡易版) ※オリジナルの作詞・作曲はYouTubeで公開中

ロボット

このブログのマスターが作成したロボットです。(試作機)

ロボットアーム

二足歩行ロボット

四足歩行ロボット

ゲーム記事

「原神」「崩壊スターレイル」の厳選された攻略記事