サシミスタジオ

2021.09.03

【C#】staticとはなにか？ゆる〜く紹介

staticの付いている変数や関数は一体何者なのか。

staticは「静的なもの」という意味があります。

静的なものとはどういうことなのか、実際に作って処理を見てみましょう

2021.08.30

【JavaScript/CSS】レスポンシブデザインの作り方

レスポンシブデザインは、ざっくり言うと訪問したユーザーのデバイスの画面サイズに合わせて、操作しやすくなるように切り替えることができるwebデザインの手法です。

最近のWebサイトではレスポンシブデザインは結構当たり前になってきています。

レスポンシブデザインを導入する方法として、CSSのみの方法とJavaScriptから制御する方法の2種類があります。

この記事ではこの2種類の方法を紹介します。

2021.08.27

【C#】ASP.NET Core MVCのはじめかた

最近、ASP.NET CoreのMVCフレームワークを使ったWEB開発をする機会がありました。

その時にハマったポイントを重点的にメモをこの記事で残しておこうと思います。

2020.03.04

【Excel/VBA】VBAでオブジェクトを画像として保存する方法

Excelで図形や画像を組み合わせたものを画像として保存したい場合があります。

ですが、Excelには画像として保存する機能が備わっていません。

解決策はいろいろありますが、今回は流用性を考えてVBAでの解決方法を紹介します。

動作を確認したExcelバージョン

・Excel 2013

・Excel 2016

2020.02.26

【Flutter】Widgetを縦方向横方向に並べ替えをするReorderWrapの使い方

先日、Flutterで縦横並べ替えが出来る「ReorderWrap」というツールを自作しました笑

【Pub.dev】

https://pub.dev/packages/reorderwrap

【Github】

https://github.com/shoushimizu1025/reorder_wrap

このツールを使うとこのように縦横並べ替え＆並べ替えた後に並び順をコールバック関数で受け取る事が出来ます。

https://twitter.com/i/status/1230459447727673346

https://twitter.com/i/status/1231068131923120134

作った理由

Flutter公式の機能には縦並べ替えの「ReorderableListView」というWidgetはありますが、縦横並べ替え（マス目状並べ替え）機能を持つWidgetがありませんでした。

このようなツールは既に素晴らしいものがありますが、私の使っている環境では2020/2/20時点でFlutterバージョン関係のエラーで利用できなかった為、「仕方ない、作ってみるか！」と安易な気持ちで作成しました。

【素晴らしい並べ替えツール】

https://pub.dev/packages/reorderables

ツールの使い方

特徴

このツールは縦並べ替えの「ReorderableListView」Widgetに影響を受けています。

また、ツール名に「Wrap」とある通り、WrapWidgetで並べ替え機能部分をラップしています。

なので、画面を飛び出さずに折り返して、複数行となって表示されます。

Wrapに、行間をまたいで並べ替えを行えるようにしたのが「ReorderWrap」です。

移動方法

「ReorderableListView」と同じくLongPressで移動を開始します。

利用できる条件

WrapWidgetと同じく、対象となるWidgetリストをクラスの引数として渡します。

その際、あまり汎用的な構築を行っていなく、Widgetリスト全ての縦横幅が同じである必要があります。（そのうち直すかも）

縦10横15の場合は、全てのWidgetが縦10横15でなければなりません。

使用例

Pub.devの通りですが一応載せておきます。

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _icons = <Widget>[
    Container(
      child: GestureDetector(
        child: Container(height: 90, width: 90, color: Colors.red),
        onTap: () {
          debugPrint("Tap!");
        },
      ),
    ),
    Container(height: 90, width: 90, color: Colors.blue),
    Container(height: 90, width: 90, color: Colors.purple),
    Container(height: 90, width: 90, color: Colors.blueGrey),
    Container(height: 90, width: 90, color: Colors.brown),
    Container(height: 90, width: 90, color: Colors.orange),
    Container(height: 90, width: 90, color: Colors.lime),
    Container(height: 90, width: 90, color: Colors.lightGreen),
    Container(height: 90, width: 90, color: Colors.pink),
    Container(height: 90, width: 90, color: Colors.lightGreenAccent),
    Container(height: 90, width: 90, color: Colors.yellow),
  ];
  List<int> _indexList;

  @override
  void initState() {
    super.initState();
    _indexList = List.generate(_icons.length, (i)=>i);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          ReorderWrap(
            itemHeight: 90,
            itemWidth: 90,
            children: _icons,
            reorderCallback: (newIndexList, oldIndex, newIndex){
              setState(() {
                _indexList = newIndexList;
              });
            },
          ),
          Text(_indexList.toString(), 
            style: TextStyle(fontSize: 20)
          )
        ],
      ),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {

List<Widget> _icons = <Widget>[

Container(

child: GestureDetector(

child: Container(height: 90, width: 90, color: Colors.red),

onTap: () {

debugPrint("Tap!");

Container(height: 90, width: 90, color: Colors.blue),

Container(height: 90, width: 90, color: Colors.purple),

Container(height: 90, width: 90, color: Colors.blueGrey),

Container(height: 90, width: 90, color: Colors.brown),

Container(height: 90, width: 90, color: Colors.orange),

Container(height: 90, width: 90, color: Colors.lime),

Container(height: 90, width: 90, color: Colors.lightGreen),

Container(height: 90, width: 90, color: Colors.pink),

Container(height: 90, width: 90, color: Colors.lightGreenAccent),

Container(height: 90, width: 90, color: Colors.yellow),

];

List<int> _indexList;

@override

void initState() {

super.initState();

_indexList = List.generate(_icons.length, (i)=>i);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Column(

children: <Widget>[

ReorderWrap(

itemHeight: 90,

itemWidth: 90,

children: _icons,

reorderCallback: (newIndexList, oldIndex, newIndex){

setState(() {

_indexList = newIndexList;

});

Text(_indexList.toString(),

style: TextStyle(fontSize: 20)

)

);

}

ReorderWrapは4つの引数を設定します。

・itemHeight

Widget１個分の高さ(int)

・itemWidth

Widget１個分の横幅(int)

・children

List<Widget>型のリストデータを設定します。

・reorderCallback

コールバック関数です。

引数に、並び順Indexリスト(List<int>)、移動前のIndex(int)、移動後のIndex(int)を指定して、これらを受け取れます。

最後に

同じく縦横並べ替え機能に悩んでいる方の助けになれば幸いです。

Flutterのツールを作ったのは初めてで、もっといい組み方があるかもしれません。

その場合はご教授お願い致します。

2020.01.30

【Flutter】Redux使用時にStatelessWidgetをアニメーションさせたい時の方法

FlutterでReduxアーキテクチャパターンを採用している場合、StatelessWidgetでの構築がメインになると思います。

ウィジェットをアニメーションさせたい場合が必ず出てくると思いますが、アニメーションは基本的にStatefulWidgetで行う事が前提となっているようで私は悩みました。

公式のドキュメントをみてみると、Statelessでアニメーションをさせる例がありますが、パラメータとしてStatefulWidgetで作成したAnimationControllerを持っている為、StatefulWidgetから呼び出す前提の方法になります。

この記事では、完全StatelessWidgetだけでウィジェットにアニメーションを持たせる方法を紹介したいと思います。

FlutterのReduxについてはこちらの記事でまとめています。

ここから先の解説はこの記事に沿ってReduxを導入した前提で進めていきますので一度ご覧ください。

FlutterにReduxアーキテクチャを実装させる

2020.01.22

【Flutter】公式より多機能なWebViewプラグイン「flutter_inappwebview」の使い方

以前に公式のWebViewプラグイン「webview_flutter」について何度か紹介しましたが、その後「flutter_inappwebview」というとてもマルチな機能を搭載していて便利なプラグインを知りました。

webview_flutterの記事はこちら↓

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

今回はこの「flutter_inappwebview」の特徴と使い方を紹介したいと思います。

2020.01.16

FlutterにReduxアーキテクチャを実装させる

Flutterでアプリ開発を深く進めていたら、Widget間のデータのやり取りや状態（State）の管理、UIの制御が複雑になり、シンプルなアプリの域を超えてしまうとデータ管理が難しいなと思い、「状態管理」をするためにFlutterにソフトウェアアーキテクチャを導入することにしました。

今回は、Web開発で以前に利用した事があり、Flutterでも利用可能な「Redux」アーキテクチャパターンを採用してみることにしました。

この記事では、FlutterでどのようにReduxアーキテクチャパターンを導入・利用していくのかについて紹介していきます。

2020.01.08

Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法

Railsでwebpackerを利用してVue.jsを取り入れた完全SPAなサイトを構築しようとして、ページのルーティングを設定するためにVueRouterを導入しました。

VueRouterでルーティングを設定すると、デフォルトで下のようなURLに「#」が追加された状態で識別されてしまいます。

「#」が途中に混じっているのはあまりいいとはいえないため、VueRouterに「mode: ‘history’」という設定を加えて消してあげます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page1 from './pages/page1.vue'
import Page2 from './pages/page2.vue'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history', //← 追加
    routes: [{
            path: '/',
            component: Page1
        },
        {
            path: '/page2',
            component: Page2
        }
    ]
});

import Vue from 'vue'

import VueRouter from 'vue-router'

import Page1 from './pages/page1.vue'

import Page2 from './pages/page2.vue'

Vue.use(VueRouter)

export default new VueRouter({

mode: 'history', //← 追加

routes: [{

path: '/',

component: Page1

{

path: '/page2',

component: Page2

}

]

});

これで解決か・・・と思いきや、新たな問題が発生してしまいます。

ページ切り替え後のURLを直接アドレスバーに入力して読み込みをかけると、Routing Errorもしくは404エラーが発生してしまいます。

調べても対策方法がまちまちで結局どうすればいいか悩みましたが、自己解決（正しい直し方かは不明）したので、今回はこのエラーの原因と対策方法について紹介したいと思います。

前提条件

・Rails 6.0.2

・vue 2.6.11

・vue-router 3.1.3

2019.12.25

【Rails】データを圧縮してデータベースに保存する方法

大きな文字列データやJSONデータなどをDBに保存しようとすると、DBへの負荷が大きくなります。

少しでもその負荷を取り除くためには、データを圧縮して容量を削減する必要があります。

Railsでは「 zstd-ruby 」というzstdによるデータ圧縮gemが用意されています。

今回はこの「 zstd-ruby 」の使い方について紹介します。

ちなみに、zstdというのはFacebookに所属しているYann Colletによって開発された可逆圧縮アルゴリズムだそうです。（Wikipediaより）

＜前提＞

Rails6.0.1（5.2系でも同内容で確認済み）

MySQL 5.7

12 3 4 5 6

【C#】staticとはなにか？ゆる〜く紹介

【JavaScript/CSS】レスポンシブデザインの作り方

【C#】ASP.NET Core MVCのはじめかた

【Excel/VBA】VBAでオブジェクトを画像として保存する方法

【Flutter】Widgetを縦方向横方向に並べ替えをするReorderWrapの使い方

作った理由

ツールの使い方

特徴

移動方法

利用できる条件

使用例

最後に

【Flutter】Redux使用時にStatelessWidgetをアニメーションさせたい時の方法

【Flutter】公式より多機能なWebViewプラグイン「flutter_inappwebview」の使い方

FlutterにReduxアーキテクチャを実装させる

Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法

【Rails】データを圧縮してデータベースに保存する方法

運営しているWebサービス

カテゴリー

最近の投稿

アーカイブ

作った理由

ツールの使い方

特徴

移動方法

利用できる条件

使用例

最後に

運営しているWebサービス

最近人気のある記事

カテゴリー

最近の投稿

アーカイブ