Web記事に大きい画像を載せるときにどう見せたらいいかちょっと考えてみた (実装した)

onodera_sf コメントをする

※「実装した」と書いていますが、実装方法を書いているわけではありませんのでご注意ください…

もともと小さい画像であれば原寸で載せても別に問題ないのですが、でかい画像を載せるときに原寸で載せてしまうと画面いっぱいに画像が表示されてしまい見る人に圧迫感を与えてしまいます。(個人的な感想)

こういう時に一般的な対応方法としては、ある程度縮小した画像を表示させておき、画像をクリックしたときに原寸画像へジャンプさせたり、LightBox などの javascript ライブラリを使用して拡大画像をポップアップ形式で表示させたりすることが多いです。

ただ、これらの対応方法として個人的にあまり好きでない点が２つあります。(きちんと探せば満足のいくライブラリはあるかもしれませんが…)

  • ライブラリによっては縮小画像と原寸画像２つ用意しなければならない
  • 記事を読んでいく途中で画像を見ようとしてポップアップすると読む動作を中断させられてしまう

そこで私が考えた案としては、「最初は画像を縮小表示させておき、画像をクリックするとポップアップせずその場で拡大表示する」です。

実際にやると下のような感じになります。

初期表示ではある程度小さな画像で表示します。

image

画像にカーソルを合わせると指アイコンになるのでクリックするとその場で画像が大きくなります。拡大したまま放置しても問題ありませんし、もう一度クリックすれば縮小します。

image

原寸で表示されるといってもブラウザのサイズよりは大きくならないようにしています。もちろんブラウザを広げれば可能な限り原寸サイズまで広がるようにはなっています。

試しに Visual Studio の Tips のページで実装したので下記のリンク先で拡大の動きが確認できると思います。600px 以下の画像は拡大処理しないので指アイコンにはなりません。

ただ、これを実装するには事前に画像単位で仕込みが必要になるので、ブログなどのような投稿サイトではこのような動きにするのは難しいかもしれません。とはいうものの、ページ表示のタイミングで javascript を駆使すれば実現出来そうな気もするので、もしかしたらこんな感じの動きを実装できるライブラリがすでに存在しているかもしれません。

探すのがめんどくさいので、気になる方は調べてみるのもよいかもしれません。

Share this...

UWP アプリケーションをデバッグ実行したときにエラーで配置されたなかった時の原因と対処法

onodera_sf コメントをする

どのタイミングでそうなったのかわからなかったのですが、表題の通り VS2019 で新規で UWP プロジェクトを作成して実行してもエラーで実行できませんでした。Windows を再起動してもダメ。

とりあえずネットで探して以下のページで紹介されている内容で対応しました、

Share this...

SFTP の Tips を公開しました

onodera_sf コメントをする

Windows 10 や Windows Server 2019 では SFTP (SSH) に関して OpenSSH のインストールが簡単になっており、わざわざ Linux 系のサーバーを使わなくても SFTP サーバーの構築が簡単にできるようになりました。

以前 SFTP サーバーの構築の機会があったので、その手順について Tips としてまとめてみました。上記以外の OS では OpenSSH のダウンロードからのセットアップが必要ですが、その手順についても一緒にまとめています。

今回はセットアップと実際にコマンドを使用して SFTP によるファイルの送受信までを書いていますが、後で .NET を使用した SFTP 送受信プログラムの Tips も書こうかと思っています。

image

同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite
Share this...

デスクトップアプリケーションを Microsoft ストアで公開する Tips を書きました

onodera_sf コメントをする

調べてもあんまり情報がなかったのでとりあえず一番簡単な方法で Microsoft ストアに公開できる手順をまとめてみました。Desktop Bridge を使っていますが、２～３年ぐらい前に比べると簡単に行えるようになってるみたいです。

ただやってみた感想としては１００％そのまま移行できるというわけではなく、いくつか修正が必要な場所が出てくるところがあります。特にプログラムの実行場所がユーザーフォルダでもなく Program Files でもなく UWP のインストール場所になるので、プログラムの配置場所に依存するコードを書いてたりするとそのまま動かなかったりします。インストールしてのデバッグ実行は可能なので公開前には動作確認を行った方がよさそうです。

————————

ISLAND [フロントウイング]
Share this...

WiX の Tips を公開しました

onodera_sf コメントをする

Windows 向けアプリケーションのインストーラーを作成するのに使われることの多い WiX に関する Tips をいくつか作成しました。WiX を使用すると Visual Studio に標準で含まれているセットアッププロジェクトよりも、より自由な形でインストーラーを作成することができます。

ゲーム「リトルセイバー」の体験版を配布したときも WiX を使用してインストーラーを作成しており、せっかくなので覚えたことを Tips にしてみました。

Tips は以下のページにまとめております。

———————————

  • プログラム配布用の Windows インストーラーを作成ための WiX をセットアップする
  • Wix を使用して Windows インストーラー「MSI」を作成する part1
  • Wix を使用して Windows インストーラー「MSI」を作成する part2
  • バージョンアップしたアプリケーションを配布するインストーラーを WiX で作成する
  • インストーラーファイルの付加情報を日本語で設定する
  • CAB ファイルを MSI ファイルの中に含める
  • 64bit アプリケーションをインストールするインストーラーを作成する
  • Ngen.exe を使用してインストールしたプログラムの起動を高速化

image

ISLAND [フロントウイング]
Share this...

ホームページ運用サイトの新サイトへの移行予定について

onodera_sf コメントをする

現在 Web サイト「ソーサリーフォース」を「http://sorceryforce.net/」で運用していますが、運用を開始してから９年ぐらい経ちました (まあ、最初の２年ぐらいはほぼ放置してたんですが…)。

５年１０年経つと Web の仕組みがどんどん変わっていき、当時のスタイルに合わせて構築していたものも古くなってきたので新しくサイトを作り直すことにしました。

とはいうもののまったく新しいサイトというわけではなく現サイトのリプレースみたいな形なのでサイト名も変わっておりませんし、レイアウトも少し変えたぐらいになっています。

新しいサイトの URL は「https://core.sorceryforce.net/」なんですが、現在仮運用中なので順次移行を行っていき、完了したら最終的には「https://sorceryforce.net/」に戻す予定です。

ちなみに新しいサイトでは何が変わったかというと、見た感じでは分からないですが以下のものを作り直しています。

  • 見た目を少し変更 (流行に合わせているわけではありません)
  • HTML5 に準拠 (可能な限り)
  • CSS3 に準拠 (可能な限り)
  • 参照クライアントライブラリをバージョンアップ
  • ほぼ HTTPS 対応 (現在 HTTP はつながらないようになっています)
  • Web エンジンを ASP.NET から ASP.NET Core に変更

内部的なところは大きく変えていますが、閲覧者には関係ないところなので割愛します。まだ構築中なところもあるのでうまく表示されなかったりリンクがおかしい、見た目がおかしいところがあったりしますが、順次修正していきたいと思います。

当面は２つのサイトで運用しますが、統合後「https://sorceryforce.net/」に戻しますが「https://core.sorceryforce.net/」でもアクセスできるようにはしておきます。

同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite
Share this...

ちーたんタッチボード Ver 1.02 を公開しました

onodera_sf コメントをする

今回バグの修正としてリリースしましたが、前回のリリースから２年経っているので動作環境においてもいくつか変更点があります。

修正したバグの内容は以下の通りです。

  • キーのテキストのフォント名に Windows にインストールされていないフォント名を指定すると起動時にエラーが表示される不具合を修正
  • タスクバーが上、または左に配置している状態でボードを隅に配置させた際、タスクバーの幅分表示位置がずれる問題を修正

また、動作環境の変更においては以下ようになっています。

  • Windows XP, Windows Vista は動作対象外としました。動く可能性はありますがサポート対象外です。
  • .NET Framework のバージョンを 4 から 4.6.1 に変更しました。Windows 10 であればアップデートしていれば入っていると思います。Windows 7, 8, 8.1 は Windows Update から更新可能です。

ダウンロードは以下のページから行ってください。

にじよめ - 二元美少女専門ブラウザゲーム＆ソーシャルゲーム
Share this...

Windows で遊べるゲーム「リトルセイバー」が DMM GAMES にて公開されました。「遊び放題」プランでも遊べます。

onodera_sf コメントをする

image

リトルセイバーは現在、Steam や MSストア、DLsite で公開していますが、今回新たに DMM GAMES にて配信開始されました。内容は他で公開しているものと変わりませんが、DMM GAMES を中心に遊んでいる方は手軽に遊べるようになりました。

価格は他で購入する場合と変わらないように 980 円で統一しています。現在ポイント還元中 (たぶん 20%) なので、他のサイトよりはお得になっていると思います。

また、DMM GAMES には特有のプラン「遊び放題プラン」があり、こちらでもリトルセイバーを遊べるようになっています。たしか月額 980 円だったので、１か月限定で考えればかなりお得なんじゃないかと思います。すでに遊び放題プランに加入しているからであれば気兼ねなく遊ぶことができると思います。

ストアページは以下のリンク先となっています。

対応プラットフォームは他と同じく Windows 7 以降となっています。DMM GAME PLAYER のインストール(無料)が必要らしいです。

リトルセイバーの公式ページと体験版ダウンロードは以下のリンク先となっています。

同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite
Share this...

Windows向けに公開中の2Dアクションゲーム「リトルセイバー」をAndroid版としてGoogle Playにて配信開始しました

onodera_sf コメントをする

戦闘ステージ_Mobile_002

Windows, Windows 10 Mobile 向けに配信していたゲーム「リトルセイバー」を Android 向けに公開いたしました。２か月ほど前にテスター向けに限定公開していましたが、ようやく正式版として公開することができました。

「リトルセイバー」は多数のユニット同士が戦い合うリアルタイムバトルアクションゲームでPC向けに制作しておりましたが、スマートフォンでも遊べるように Android で動くようにしました。とはいっても実はすでにスマートフォン OS である Windows 10 Mobile でも遊べるようになっていましたので、すでに遊ばれた方もいるかもしれません。ただ、Windows 10 Mobile ユーザーは全体的に少ないと思いますので、今回 Android に対応したことによって多くの人が遊べるようになったかと思います。

要求スペック

要求スペックは以下のようになっています。細かいことについては下の方に書いてあります。

  • CPU : Snapdragon 617 相当
  • メモリ : 2GB
  • OS : Android 8.0 以降 (7.0 は未検証、6.0 以前は非対応)

推奨スペックなので上記スペックより低くても動作しますが、その場合カクカク動作になったりするかもしれません。

配布場所と価格

Android 版のリトルセイバーも有料版と無料版があります。有料版はアカウント単位で買い切りです。価格は Windows 版と同じで 980 円となります。配布・ダウンロード先は Google Play となっており、apk 単体では配布しておりません。

注意点としてセーブデータについてですが、有料版と体験版は別アプリとして配布してありますので、体験版のセーブデータを有料版の方に引き継ぐことはできませんのでご注意ください。

PC 版と違う点 その１

PC 版と違う点はスマートフォンは PC に比べるとかなりスペックが低いので、同時に動くユニットの数はそれなりに減っています。とはいってもスマートフォン同士でもスペックの差はかなり広いのでオプションでユニットの配置数はある程度調整することは可能です。低スペックのスマートフォンだと配置数を最低にしてもカクカク動作になりますし、私がテストした Google Pixel 3a の場合、最大数で配置してもほぼスムーズに動作しました。より高スペックなスマートフォン、タブレットならもしかしたら PC モードでも遊べるかもしれません。PC モードはユニットの配置数ははるかに多いですが、そもそも広い画面が必要なので少なくともタブレットぐらいのサイズは必要です。

image

一応要求スペックとしてはCPUは「Snapdragon 617 相当」、メモリは「2GB」にしてあります。ただスマートフォンの種類がかなり多いので正直ここが妥当なのかはわかりません。体験版も公開してありますので事前に動作確認してください。

PC 版と違う点 その２

PC 版と違う点のもう一つはひとつのステージの広さがPC版に比べて狭くなっています。前述のスペックを考慮しているのもひとつなのですが、スマートフォンの場合、出先などで少しだけ遊ぶ、というスタイルもあるかと思いましたので、なるべく１つのステージを小さくしてステージクリアごとにセーブできるようにしました。その代わり PC 版に対してステージ数(深さ)を増やしました。普通に遊べば攻略にかかる総時間は PC 版と変わらないかと思います。

公式サイト

いまだに完成していないのですが、以下の URL が公式サイトとなっております。Windows 版もこちらから体験版をダウンロードできたり、有料版の購入ページにアクセスすることができます。

参考プレイ動画

ニコニコ動画、Youtube でリトルセイバーのプレイ動画を公開しています。どちらも投稿している内容は同じです。

同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite
Share this...