ブログ｜ネコ日和

[PR]

2024年11月23日

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

「デザイン」って何よ？　個人サイト編

以前に書いたweb編と同じようなものだけれども、
自分のPC版ホームページを改装したいから
自分の頭の中をアウトプットしてみたい。

前提

個人（相方と運営する本館のPC版）サイト
イラスト、漫画、小説を置いている
更新頻度は低いものの小説は更新中
ブログ（ここ）、ツイッターなど外部もある

目標

使用しているframework（BootStrap 3）が古いので新しい物を使用
小説の長文を掲載することを目的に作成したPC版だったが、時代的にはスマホ・タブレットに対応が必要か
途中で止まっている、更新予定のない（しかも需要が無い）コンテンツ順位を下げる
PC版だったので左右の分割デザインだが、html5に合わない部分が出てきているので考え直す
文字メインにするなら動的に見やすくしたい（フォント、フォントサイズ、文字色、背景色を設定できるようにしたい）
背景の壁紙を統一（見やすく）

思う事

殆ど目標に上げているのだけど、サイトのデザインがPC版のみだけなのでスマホ・タブレットに対応させた方がいいのかなー、という感じです。
サイト構造を流行りのものにしたい、ってのがあります。

あと、今の構造だと小説はiframeで呼び出してるので各ページの解析はできてないと思われる。小説ページは殆ど見られてないのだけれども。
頒布物の見本としてリンクしてるんだから、多少は見られるかなー？（焦）というのがある。

更に、サイト公開の当初よりも読み物が増えてしまったので、毎回ページごとにhtmlを作成するのが大変。
今回のように改装しようと思うと、その分量が壁になる。
正直、イラストだけならまだ数ページに収まっている（重いかどうかなんて考えてないから）ので何とかなるけど、
小説とか読み物は一本でも数ページになる。読み物自体も増えてるからバンバン増える（涙）。

外部サイト（有名なPIXIVとか、カクヨム、なりたい系）に放り投げた方が良いのかなーって思う時さえある。
頒布スペースに関連付けができるし、同人関連で検索してもらえる確率的には外部サイトなんだけれども、やっぱり自分で管理できるサイトは欲しい。
好き勝手にできるから。

それこそ、管理コンテンツが多い場合はWordPressとかってのが最近の流行り。
でも、直にhtmlの勉強も兼ねてるし、無意味にツールを噛ませると問題が起きた時に面倒。

端末の処理スピードが速いなら、txtを準備しておいて動的にhtmlから読み取って表示するjsを作成した方が楽かもしれない。
直書きのhtmlが速いのは知ってるけど。
管理的には別途txtを準備した方が楽だったりする。

frameworkを新しくしなきゃいけないから、全ページが更新対象なんで困るんだよねーww
一気にやらないと、後回しにしたページは公開しなくなる可能性があるので嫌なんです。
折角自分が作ってきた歴史なので残しておきたい。

[0回]

「デザイン」て何よ？　Webデザイン編

前置き

毎朝の起床時間が遅くなり、
7:25から見ていたデザイン「あ」を見る機会が減った今日この頃。
今年のウィルスが関係しているわけでは無く、職場環境に順応し始めた結果である。
あと、早い時間に起きて朝食の準備をすると邪魔になり始めたんです。

同人活動が復活し始めた（まだ本格的には始動していない、本だけに）頃に
ウィルス問題でイベントの延期となったので「イベント参加したい」欲のピークが過ぎそうになっている。
まだ「イベント参加したい」欲は残っているけど手をこまねいている段階の今、頒布物について考える時間ができてしまった。
目の前に締め切りがあれば勢いで考えなかったのだろう、しかし今は時間がある。
それが題名の「デザイン」って何よ？　になる。

デザインっていっぱいあるんだなー、の長々とした話。
長いので分割することにしました、なんでデザイナーじゃないのに「デザイン」について書いているんだろう？
今回はWebデザインの話。

Webデザイン

見た目
使いやすさ
間違い難さ

実は職業がSE（システムの方ね）で、フロントエンドとサーバーサイドのプログラムを書いている底辺プログラマーである。
（PHPは数値系のバグを生産できる言語だと思っている。）
フロントエンドとはいえ、「見た目」じゃなくて表示させるだけがメインだった。
まぁ、でも人数が少ない現場ではプログラマーとはいえ「見た目」には多少携わらなければならなかったのが現実。
仕様書や設計書の段階で「デザイン（見た目・使いやすさ・間違い難さ）」が準備されていて、一貫していればプログラマーとしてはプログラムを「書く」だけのはずなのだが、プログラムが大きくなればなるほど一貫させていくのが難しい。

見た目

特に伝票内容の入力などは、その入力ページだけで内容が確認できなければいけなかったり（内容を通して見て不具合が無いことを確認するため）、横スクロールなんてさせられなかったりする（一目で分からないから）ものだから他のページ（画面）とは変わってくる。
一つ例外ができると、他のページ（画面）でも無理矢理詰め込んでいたのが「こっちも例外で良くない？」なんてことになる。
そんなことをしていると、全体で一貫性がなくなっていくのが現状。
これが「デザイン（見た目）」の一つ。

使いやすさ

次に「デザイン（使いやすさ）」は説明が難しい。
例えば、ページのナビゲーション（大体上の方にあって、トップページだの概要だのが一列に並んでる奴）にクリックする（押す）と細かい内容が出てくるボタンがあるとする。
「商品一覧」ボタンをクリックすると、すぐ下に「オンデマンド印刷」とか「オフセット印刷」とかって出てくる感じ。

これがフォーカスを外す（画面の矢印みたいなのが別の所にいく）と隠れてしまう。
パソコンだと「あー見えなくなった」だけど、
スマホとかだと、そもそもフォーカスを外す行動は「別の所をタップ（クリック）」だから「見なくなったものが隠れた」になる。

上記の例は「動作」がメインだけど、もっと分かりやすい例なら「ボタンの大きさ」がある。
画面（ディスプレイ）の大きさにcmを使うのは妙な気分だけど、自分が分かりやすいのでcmを使う。
パソコンだと1cm未満のボタンだって平気でクリック（押すことが）できる。
スマホだと1cm未満のボタンは押せなかったりする（当たり判定の問題）。
指の小さい人は押せるけど、指の大きい人は拡大したり何度か押したりするかもしれない。

間違い難さ

デザイン（使いやすさ）にも関連するけど、操作を間違えにくくするのもデザインの一つ。
例えば、ボタンが幾つも並んでいる場合。
ボタンが小さくて、隣との間隔が狭ければ押し間違えるかもしれない。
スマホなら特に問題で、押すときに結局はボタンが指で隠れて見えない。
パソコンなら矢印で完全に隠れてしまうことは少ないし、位置を合わせた後にクリック（選択）すればいい。
だから指で操作する端末とパソコンとで表示が変わってたりする。
幾つも並んだボタンでも、ボタンが指より大きければ間違えは少ない。

大きさだけではなく、色、形を変えて見分けを付けるのも方法の一つ。

特に、「リセット」「取り消し」など消してしまうボタンなどは色を赤くして見分けやすくするのが主流。赤が警戒色になるからね。

Webデザインで見つけただけでも、こんなにあるww
しかも、見つけた全てが絡み合って、色や形に意味があるともっと大変。

[0回]

Linux Mint MATEに色々設定

Linux Mint MATEをUSBへ入れたはいいものの、
日本語を使うのには設定が必要だし、
リモート接続するには設定が必要だし、
VPN使うには設定が必要だし、
……結局は設定とか必要なんですよねー。

次に同じことがあるかもしれないのでメモ。

■リモート接続にRemminaを導入
「ソフトウェアの管理」から「remmina」と検索する。
1)Remminaが出てくるのでインストールする
　　無事にインストールできた！
　　あれ？　RDP（リモートデスクトップ）接続の項目が無い。
　　プラグインが必要らしい。。。
2)Remmina-plugin-rdpもインストールする（同じく「ソフトウェアの管理」から）
　　反応が遅いせいか、一度再起動しないとプラグインが反映されませんでした。
3)リモート接続の設定を追加する
　　「RDP」で「+」をクリック、接続の設定を追加する。IPとかポートは個々のPCによる！

■VPNを使えるようにする！
【参考】https://nonsensej.xyz/articles/2019/03/13/linux-mint-l2tp
1)「設定」の「ネットワーク接続」をクリックする
2)「+」をクリックして、接続の種類で「VPN」を指定
3)【参考】ページを見ながら設定する
　　Windowsで設定していたので、基本的には同じように設定する。
4)コマンドで「install network-manager-l2tp-gnome strongswan libstrongswan-extra-plugins libcharon-extra-plugins」を叩く！
　　コマンドで導入だー。
5)「ネットワーク接続」のウィンドウで「VPN」タブから「IPsec Settings」をクリック
6)個別の設定をする！（共有のパスワードとか）
　自分の環境では、次の設定も必要だった
　　Phase1: 3des-sha1-modp1024!
　　Phase2: 3des-sha1!
7)右下のネットワークマークをクリックして「VPN接続」から設定したVPNをクリックする
　　接続に失敗したらメッセージが出る。

■日本語入力する！
【参考】http://freebsd.sing.ne.jp/linux/07/05/02/04.html
【参考】https://www.hiroom2.com/2018/07/17/linuxmint-19-japanese-input-method-ja/
導入時に地域を「日本」としているので、日本語は表記されているけれどもなーんか入力はできない。
というわけで日本語入力できるようにしたい。
「設定」で「Fcitx」をー、
を～？　ないぞー？？
1)「ソフトウェアの管理」から「Fcitx」を検索してインストールする。
　　「設定」で「Fcitx」を選ぶ。エラー。。。
2)「ソフトウェアの管理」から「Fcitx-config-gtk」を検索してインストールする。
　　よーし、なんか表示される。
3)「設定」から「入力設定」をクリックする。
4)入力方式フレームワークというウィンドウから言語パックをインストールする。
　　「インストール」して、というのでインストールする。
　　時間がかかったけどインストール！　一回失敗したからってめげない！！
　　インストールしたら再起動しておきましょう。
5)「システムツール」から「Fcitx」をクリック
　　日本語入力のMozcの優先順位を上げる。
　　メモからも日本語入力できるようになりました。

とりあえず行っている設定。

[0回]

USBにLinux Mint MATEを入れてみた

USBにLinux Mint MATEを入れてみた

気づけばカメメから拍手されていた！

■今あるPC
1台目PC：白ノートPCは2008年購入（Vistaが入っていた）
2台目PC：黒ノートPCは2012年購入（Windows7 Home、現役）
3台目PC：小型デスクトップPCは中古で2019年末頃購入（Windows10 Pro、リモート先）

■前置き
自宅内の親ルーターに無線ルーターを有線LAN接続して、
各ノートPCとは無線LAN接続、デスクトップPCとは有線LAN接続している。
これで無線ルーターを経由するためノートPCからは直接外部のネットワークには出ていない。

以前から「USBにOS入れて使うんだー」などと遊んでいたのだが、
そんな中で、あんまりにも古いPCに"間違って"OSを書き込んでしまってから
PCがサクサク動くようになってしまった！

USB経由よりも本体に内蔵されているHDDで読み書きする方が速いのは当然。
勉強がてら使ってみるとRDP（リモートデスクトップ）の接続端末としては十分な性能だった！
これが2008年購入のPCだから申し分ない。
ちなみにOSはXubuntuである。
流石に最新のUbuntuは難しかった（32bitが配布されなくなった頃に、32bitのPCへ入れようとしてたんだから当たり前だった）。

以前はここまでだった！

そして一番使用しているであろうPCのOS、Windows7のサポートが先日切れた。

現在、Windows7の黒ノートPCからは直接ネットワークサーフィンなどせず、
もっぱらWindows10へリモート接続するだけとなっていた。

しかし、この黒ノートPCは元々「お絵描き」、「DTM遊び」、「3Dモデリング」、「動画作成」に使っていたもので
リモート先で
・ペンタブ（板タブ）の筆圧感知がないと「お絵描き」はできないし、
・「DTM遊び」では音がずれてしまうと面白くないし
何より環境移行が完全に停滞しているのである！！
（やる気があるときにしか作業しないのに、気力と体力が足りなすぎる。）

予算の問題でデスクトップPCのSSD容量がそんなに多くないのも原因の一つ。
（NASを追加するか、外付けHDDかSSDを追加するか考え中。。。）

既にXubuntuのPCは、現状がPCとしての限界だろう。
メモリも2GBにしてある（PCとしての最大量）、もしストレージをSSDに換装してもCPUのスペックが古い。
Windows7の環境はオフラインで利用するには十分だし、この環境でしか使えないソフトがあるのでそのままにしておきたい。

一番環境を汚さずに利用できるのがUSBだろうと考えて、再びUSBにOSを入れて遊ぶことにした。

■本題
条件としては次のもの
1)外部のネットワークへ直接出られること
2)最新版が手に入ること（上記1)のため）
3)「お絵描き」ができる。wacomのペンタブで筆圧感知ができること
4)それなりに軽いこと（重たいと使いづらいため）
5)USBに入れるため容量が少ないこと
6)追加費用はなるべく少なく

USBは元々OSを入れて遊ぶように、と以前に購入していた3.0のPicoDrive L3 64GBを使用する。

●とりあえず、Ubuntuの最新版を入れてみる。
情報も多いし、リッチ（多機能）だとはいえLinuxだから入るには入った。
だが、古めかしいCPU Core i5-2400では荷が重かったようだ。
というか、BIOSでVirtualization Tecnorogyを使用する時点で気づけば良かった！
描画能力が必要なんですよ！（細かいところは分からないけれども、見た目を良くする能力）

ちょっと使ってみたけれども、遅い！　起動するのも遅い。
下手したらWindows7の起動よりも遅いかもしれない（Xubuntuは速いので比較にもならない）。

そして気づいた、このPCはUSB3.0の口があるけど、そこからUSBブートはできない。
BIOSの設定があるのかもしれないが、とりあえず現状は3.0から起動できないので2.0から起動している。
これも遅い原因の一つ。

●じゃぁLinux Mint MATEを入れてみよう。
軽量Linuxとして有名なMintさんを入れてみよう。
Xubuntuは既に導入しているから別のOSを試したいのが本音。
Linux Mintだけでも環境に合わせて三種類あるが、XfceはXubuntuと同じだし、Cinnamonはリッチそうだし、
Mint用に作られたというMATEにしてみる。
なんかマテ茶の産地からとったらしいからメイトと呼んでいたがMATE（マテ茶）と呼ぼう。

UNetBootinでUSBブート用のUSBを作成して、64GBのUSBに書き込んで
黒ノートPCで起動してみる。
やっぱり遅い。。。
PCのメモリは4GBだから追加するか。調べたら空きスロットが無いから交換？　えー、やだーー。
でも、使い続けるなら交換も視野に入れないと困るしなー。

それでも多少遅いことに目を瞑れば「お絵描き」のためのソフトは追加できたし、ペンタブからの筆圧感知はしてるし、
RDP用のソフトも入って、VPNの接続もできた！

よし、これでUSBだけ持っていけば、どこからでも自分のお仕事環境に接続できるぞ！
……うん？

[0回]

コピー本作ったから作り方のメモ

明けましておめでとうございます。
新年あけてしまていました。

先日、成人の日（祝日）にあったイベントでコピー本を無料で配布してきました。
「思い立ったが吉日」で行動するから行き当たりばったりでしたが、
当日なんとかスペースで配ることに成功しました。

で、作り始めたのが二日前なので内容は薄いし自宅プリンターだし、チラシ作成のついでなので「ついで」の方が大変だったwww

■仕様
自宅プリンターcan/on 3630でモノクロ印刷（表紙もモノクロ）
両面印刷で内容8P、表紙と裏表紙は片面印刷
表紙の上に小売りしてた図形用のトレーシングペーパー付
ホッチキス止め、中綴じ本
A4のコピー用紙を半分に折ってA5

■使ったもの
自宅プリンター、プリンターのインク
A4コピー用紙、トレーシングペーパー（いるのか？）
中綴じができるホッチキス、ホッチキスの針
Medibang Paint Pro（表紙、裏表紙のイラスト用、1P漫画作成）、ペンタブ
Libre Office Writer（内容が文字ばかりだったので）
フリーフォント
二次元バーコード作成のサイト（二次元（QR）バーコード画像の作成）

■参考
can/onのおうちで作る同人誌
https://creativepark.canon/doujin/index.html
QRコード（二次元バーコード）作成【無料】
https://www.cman.jp/QRcode/

=======印刷時の作業と購入物品=======
プリンターと用紙類はあったので、購入したのは以下の二つ。
・中綴じができるホッチキス（百円均一にありました）
・プリンターの黒インク（モノクロ印刷だし）

今回は自前でイラストと漫画を用意しましたが、イラストはイメージさえ合えばフリー素材を組み合わせれば作成可能。ペンタブだって不要。
漫画は、手に取ったけど「なんだ文字かよ」って思われても「なんだ1Pだけ漫画あるじゃん」の方が残念に思う度合いが低かろうと思って追加した程度なので、本来は不要。
そもそも無料配布なんだから自分で敷居を高くしなくっていいはず。

内容ができたら試しに印刷してみて、フォントと余白の調子を見てから本格的な印刷を開始。
余白が多いので、文字の大きさが気になるだけ。特に中綴じなので「ノド」（冊子を開いたときの真ん中）の心配は少なかった。

印刷の設定をするだけで、印刷後は紙を半分に折って真ん中をホッチキスで止めるのみ！
参考urlにあった通り、PDFに出力するだけで簡単に中綴じができる状態で印刷されます。

内容は薄っぺらいけど、初めて中綴じのコピー本を作成できました。
しかも結構簡単で、ホッチキスとインクぐらいしか買い足してないな。
実は使用したソフト（本文：Libre Office、絵：Medibang Paint Pro）はフリーで使用できるし、さらに言うならフォントもフリー（PDFに出力するし、OS変わったりするんで後から追加できるフォントが良かった）。

インクは買いましたが、コンビニでコピーもできるらしい。
でも、印刷はする方なのでインクの購入となりました。
結局コピー本作成の後にチラシを作ったもんだから、深夜にプリンターが頑張って印刷してくれたので、インク購入して良かった。

十部程度を作成しましたが、配布できたのは半分程度。
いいんですよ、チラシの方はかなり配ったんだから！！

[1回]