ぺやろぐ

ぺやろぐ

焼きそばよりチャーハンが好き。

【PHP】XAMPP + VSCodeでPHPの開発環境を作った(Windows)

↑「$_POST」使っとるやん!
どうも、ぺやんぐ(@peyangu485)です。

今回は、最近触り始めたPHPを家でも触れるように環境構築したことを記事にまとめておきます。
仕事で触り始めたのはいいけど、環境構築にそれなりの時間がかかってしまって悔しかったのもある。

今回の構築時間は、記事に書きながらでも2時間もかかってないと思われる。
集中してやれば30分ぐらいでできそう。

現場ではデバッグまでできるようになるまで、半日かかったのに……。


XAMPPのインストール

ここを参考にXAMPPのインストール

qiita.com

http://127.0.0.1/dashboard/phpinfo.php

は、開いたままにしておいてください。

こんな感じで表示されます。




VSCodeでPHPの開発環境を作る

次は、ここを参考にVSCodeでPHPの開発環境を作ります。

www.elp.co.jp

ただ、抜けがあったり、古かったりするのでこちらの方でざっくりとした説明をしていきます。

シンタックスハイライトとかは飛ばして……。


PHP IntelliSense,PHP Debugのインストール

VSCodeの拡張機能(VSCode左側の四角のアイコン)で、PHP IntelliSenseをインストールします。
ついでに、PHP Debugもインストールしておきます。


PHP IntelliSenseの準備

xamppでインストールしている場合、php.iniがすでにありますし、「extension=php_openss1.dll」も「extension_dir=ext」も有効化されているはずです。
一応確認はしてください。

VSCodeの「設定」に3行追加するものは、元記事のままで良くて、「ファイル」→「基本設定」→「設定」から開いた、setting.jsonに以下を追記。

setting.jsonに追加するもの

Dのとこはインストールしているドライブに各々で変更してください。
とりあえず、xampp\phpにあります。

次に、language-serverをインストールするところですが、これをする前に「composer.phar」をダウンロードします。

下記よりダウンロードして、xampp/phpに配置しておく。(最新版でいいと思います)

getcomposer.org

C:\Users\ユーザ名\AppData\Roaming\Composer\composer.jsonを確認し、記載がなければ以下を追記。

composer.json

ここは元記事と同じです。(てか、だれがやっても同じ)

次に、コマンドプロンプト(管理者)で実行するのは下記のコマンドになります。

「D:\xampp\php\php.exe D:\xampp\php\composer.phar global update」

ドライブは各々で…。

問題なければこんな表示になります。




デバッグ準備

で、ここから、デバッグ準備に入ります。

まず、VSCodeでワークスペースの作成、フォルダの追加。
デバッグ機能は、ワークスペース内でないと機能しないようです。

適当にphpファイル作成。
今回は、「testだよ」を出力するファイルを用意しました。(d:\xampp\htdocs直下に置きました。)

そこから、PHP Debugのインストール
そこからは記事通りでいいが、「serverSourceRoot」と「localSourceRoot」が緑波線になってしまうので、「pathMappings」を使います。

launch.jsonに記述するpathMappingsについて

1つ目がサーバーのphpファイルを置くディレクトリで、2つ目がローカルのphpファイルを置くディレクトリになってます。
「Listen for XDebug」の方に追記して、デバッグを開始すると、「127.0.0.1/test.php」につないだ時にブレークポイントで止まります。(XDebug入れてからですよ!)


XDebugの準備

XDebugは、バージョンによっては合わない可能性があるので、下記のサイトを参考に、自環境のPHPに合った、XDebugのdllを落としておきましょう。
phpinfo()の結果をペーストするだけで、判明するとかなんかすごい!

https://samuraishockdo.info/16-code/123-xdebug-doesnot-work.htmlsamuraishockdo.info

落としたdllは「php\ext」の中に置いておきます。

php.iniに以下を追記。

php.iniに追記するXDebugの内容

Apacheを再起動して、最初に開いておいたphpinfo.phpをリロードします。
xdebugの記述があれば、OKです。


終わり

127.0.0.1/test.phpにつなぐとこうなりました。

いけた!
ブレークポイントで止まることも確認しました。

これで、XAMPP + VSCodeでのPHPの開発環境が整いました。
XAMPPを使わず、nginxでも構築しましたが、ほぼ似たような順序になりました。

ただ、XAMPPの方が早いですね。
すごく楽です。

今回、参考にさせていただいた元記事の執筆者には100万の感謝を!


【PHP】filter_inputの第2引数は対象のname属性を書けばいい

これに気づくのに2時間ぐらいかかる程度にはポンコツ。
どうも、ぺやんぐ(@peyangu485)です。

っても、まだ触りだして2日とかだからゆるちて。

iniファイルから読み込んで、画面での変更を書き込む処理の実装中にpostからのデータをfilter_inputで取ろうとしたんだけど、理解してないからめちゃくちゃなことしてた。




結論「第2引数は、タグのname属性を指定する」




いや、言うて、わたくしはポンコツでしてよ?

今回のiniファイルはセクションありのやつだから、第2引数に[セクション名][項目名]って渡して、ダメ。

え、じゃあこのタイプどうすんの?

なんとか配列で見れないか探すも見つからない。

とあるサイトで、inputタグのnameを引数にしてるのを見つける。

試しにname指定してみる。

動いた!やったー!

一番最初に参考にしたサイトが、項目名とnameを同じにしてたから、全く分からんかった……。
これ、罠やわ。

一応、公式見に行ったんだけど、「タグのnameを指定するんやで」なんて書いてるわけもなく。

そもそも、postのデータ見るのにiniファイルの項目名で見るのはおかしいんだけどね。
でもこれ、理解したから「そうだね。」ってなるのであって右も左も分からんうちはこうなる。
体系的に学ぶタイミングが必要だなぁと思った1日でした。

探しかたが悪いのかも知れないけど、何気にこれ書いてるページなかったなぁ。
さも当たり前のように書いてるから、気づくのに時間かかった。
たぶん、ここで躓くおばかさんは私だけなんでしょう……。


終わり

ちょこっと触ってみて、まぁやりやすいっちゃやりやすいがコード汚くなるなぁという印象。
まだ、冗長な書き方してるだろうから、慣れればきれいになるとは思うけど。

てことで、おすすめの初学者向けの本あれば教えてください。


【steam】Colony Survivalのコロニストの作業割り振り確認ツール

f:id:peyangu485:20180109191851p:plain

1日で作った突貫ツール。
どうも、ぺやんぐ(@peyangu485)です。

ColonySurvivalの外部ツールを作成しました!
少しは開拓者生活が楽になると思います。




ColonySurvival - ColonistReference - 通称「コロニスト何してる?」

コロニーの規模が200人やら300人やらに増えてくると、だれが何してるのか管理しきれなくなってきます。
そこで、今どの仕事に何人が割り振られているのかを確認するツールを作りました。

現在の機能もといゲームのデータの保持の仕方上、確認することしかできません。
割り振り変更とかもできると夢が広がリングなんですが……。

では、詳しく見ていきましょう。




操作画面

各職業と現在割り振られている人数が表示されます。




操作方法

画面右の「参照」ボタンを押して、「steam/steamLibrary/steamapps/common/Colony Survival/gamedata/savegames/各自のセーブデータフォルダ」を指定してください。

画面左は「更新」ボタンです。
ゲーム内でセーブした後に押すことで最新の状態を表示します。

「npc.json」へのデータの反映が、セーブ時なのでリアルタイムでの表示更新は実現できませんでした。




動作環境

Windows8.1のみ動作確認できています。
他のWindowsでも7以降ならたぶん動きます。

Macでは使用できません。




使用条件

オープンソース/フリーウェアです。
無料でご利用いただけます。
ソースコードは、MITライセンスの下でGitHubにて公開しています。




ダウンロード

ダウンロードはこちらから。

ColonySurvival - ColonistReference -

※ダウンロード及びツールの使用は、すべて自己責任で行ってください。このツールを使用した結果生じた損害について、開発者は一切責任を負いません。

ダウンロード後、zipファイルのプロパティを開いて全般タブの一番下の「ブロックの解除」を行ってから解凍してください。




開発環境・言語・ライブラリ・参考サイト

開発環境:Windows8.1 + VS2017 Community
言語:C# 6.0 + WPF
ライブラリ:JSON.NET、MaterialDesignThemesMahApps.Metro

.NET FrameWork4.5.2のインストールが必要です。
インストールされていなかった場合は、以下からどうぞ。

Download Windows Vista SP2、Windows 7 SP1、Windows 8、Windows 8.1、Windows Server 2008 SP2、Windows Server 2008 R2 SP1、Windows Server 2012、および Windows Server 2012 R2 用 Microsoft .NET Framework 4.5.2 (Web インストーラー) from Official Microsoft Download Center

参考にさせていただいたサイト様

Material Design In XAML ToolkitでWPFアプリにモダンなUIを! - Qiita

neue cc - Material Design In XAML Toolkitでお手軽にWPFアプリを美しく

http://blog.clock-up.jp/entry/2016/08/26/csharp-json

WPF用 ViewModelの基底クラスサンプル - Qiita




その他

MODにできる人がいたらやってほしいです。(切実)
あと、ゲーム内時間を使って衛兵を24時間稼働させたいですね。(朝になったら夜衛兵を昼衛兵に置き換えるとか)

生産上限に関してもjsonファイルで持っているのでツールなりMODなりで一括管理できるようになるといいなぁと考えています。

このツールに関しての質問やバグ報告などはTwitterかこの記事にコメントお願いします。




変更履歴

2018/01/09 ver.1.00を公開。
2018/03/30 ver.1.1を公開。(掘削と建築の追加)
2018/04/01 ver.1.12を公開。(ファイルが存在しない場合があるときの対応)




ドットインストールでHTMLを改めて学んでみた

基礎は大事。
どうも、ぺやんぐ(@peyangu485)です。

仕事で触ってるし、基本的には分かっているつもりだけどHTML5はそういえばきちんとは知らないな、ということでドットインストールにて改めて学んでみました。

ドットインストール - 3分動画でマスターできるプログラミング学習サービス







基礎は大事

やはり、基本的な部分なので「そうそう、そうやったな」と復習になった部分や、「ほう、それは知らなかったわ!」となった部分もあったので、なかなかいい勉強時間でした。

知らなかったのはセクション関係とpreタグ、blockquoteタグ、inputタグのtype属性のemailとnumberとdate。
preとblockquoteは使わないから忘れてるだけだと思うけど、他は初耳じゃないかなぁ。

inputタグのnumberとかはいいなぁと思ったけど、試してみたら「e」だけ受け付けるんだけど笑
便利ではあるけど、そのあたりの入力規制は自前でやったほうが良さそう。
※ちなみに、「eeeee」をコピペしても貼り付けることができました。



あと、JavaScriptが絡むと注意が必要らしい。



そして、引き続き調査したら、「e」だけいける理由が判明。

あああああああ、そういえばその書き方あったなぁ笑

1.23e3とかeが絡む数字とか打たねーよ……。
エクセルからコピーしてくんなよ……。(エクセルぐらいでしか見ない)

これは、入力不可でよかったんじゃないかなぁ。
それか、タグ内で指定できるようにしてほしいね。




おわり

入門の内容ですら、こんだけ怪しいとか大丈夫かね。
自信を少しなくしそうです。

でも、これから勉強してきちんと扱えるようになります。
次はCSSや!




【AcitveReports 9.0】グループフッターのコントロールをコード上でページフッターに追加するとエラーになる

どうも、Twitterはフォローされるけど、読者登録はされないぺやんぐ(@peyangu485)です。
いやまぁ、いいんだけどね。(どっちにしろありがたいこと)


◆背景

ActiveReports 3.0から変換ツールを使用し、9.0で使用するためのマイグレ作業中。
コードは3.0当時のまま、検証を開始した。


◆現象

印刷時に「〇〇は既に存在しています」エラーが出てこける。


◆発生箇所

ページフッターにグループフッターのコントロールをAddしているところ。


◆原因

単純にコントロール名が重複するからだと思われる。


◆対応

そもそも、ページフッタとグループフッタの違いについて知る必要がある。

  • ページフッタはdetail行が何行あってもページフッタ領域が割り当てられる。
  • グループフッタは、同一グループで、detail行が次のページに跨っても領域は割り当てられず、detail行の出力が全て終わってからからグループフッタ領域を割り当てる。

つまり、毎ページ出したかったらページフッタ、グループ単位で出したかったらグループフッタを使うらしい。
そのまんまやな。

てことで、対応としては、

その1:デザイナでグループフッターのコントロールをページフッターに移動し、コード上で追加しないようにする。
問題:グループフッターに置いて、データをバインドしていた場合、動きが変わる。(ページフッター上のコントロールにはバインドできないので)

その2:コード上でグループフッター上のコントロールをコピーし、コントロール名を変更した後にページフッターに追加する。
問題:コードが汚くなる。
   コントロール名が変更されることの弊害を考慮する必要がある。

データをバインドしていないコントロールしかない場合なら、対応その1で問題なさそう。
3.0だとこうしないといけなかった可能性があるし。
コード上にはどういった意図でコードで追加をしたのか記載されていないので、あくまで憶測だが。

バインドしている場合が問題。
その1その2、どっちも対応としてはよろしくない。

今回、グループ単位での出力があるっぽいけど、毎ページ出力しているページフッターを利用して、グループフッター自体をvisible=falseにしてるから、結局ページフッターに最初から置いておけばすむ話になりそう。
バインドもしてなさそうだし。

コード見てると、最初に作った人がデザイナ開くのが億劫になってコード上でページフッターに追加させただけでは説が濃厚。
グループフッターを非表示にしているところとか。
低スペックPCだったからコード上で対応した感ある。


◆まとめ

対応方法が決まったら、また追記します。

今のところその1で行くつもり。


〔paiza.IO〕C#erがPythonで「Hello World」してみた話

いい天気の日は仕事をせずに、ゆっくりしたい。
どうも、ぺやんぐ(@peyangu485)です。

Pythonに手を出してみたよって話。
C#や他の言語を触ってるけど、Pythonも触ってみたいと考えた人向け。

環境設定の話からするといいんだろうけど、今回使用したのはPaiza.IO。

https://paiza.io/projects/new

ここを使うと、環境を用意しなくてもブラウザ上で実行できるから楽にコードが書ける。
いい時代になったもんだ。

今回は「Hello World」の表示だから、すぐに終わるよ!


◆実装

左上の「Swift」になっているコンボボックスを「Python3」に変更。

すると、「Main.py」のタブが下に出てくるから、そこに

「print("HelloWorld")」

を入力する。

下の方の「実行」ボタンをクリックすると、出力画面に「Hello World」が表示された!

↓実行結果

では、次は改行してみる。

コードは、

「print("Hello \nWorld")」

と打つ。

改行文字は「\n」で表現する。

↓実行結果

formatメソッドを使って「Hello World」

コードは、

「print("{0} {1}".format('Hello', 'World'))」

と打つ。

この場合、「{0}」に「Hello」、「{1}」に「World」が当てはめられる。

↓実行結果




◆まとめ

「Hello World」の表示ができたということで、まずは「print」関数の使い方が分かった。

できれば、もうすこしprint関数について掘り下げてみようと思う。

paiza.IOならほかの言語も書けるから、いろんな言語で「Hello World」してもいいいかもしれない。




〔C#〕〔LINQ〕LINQはいいぞ Part2

Part2

前回からの続き



◆Max

指定した項目で最大値を持つデータを取得、表示する。

Maxメソッド

表示結果

◆Min

指定した項目で最小値を持つデータを取得、表示する。

Minメソッド

表示結果

◆Count

リストのデータの個数を取得、表示する。

Countメソッド

表示結果

◆Contains

リストの中に指定した値があれば、「True」を返す。
なければ、「False」を返す。
※クラス型のリストの場合は、一致するかの判定できないため今回は「Name」でstring型のリストを作り、その中に指定した値があるかどうかを確認している。

①Trueを返すコード

Containsメソッド(True)

②Falseを返すコード

Containsメソッド(False)

表示結果 ①

◆SequenceEqual

リスト同士を比較し、同じであれば、「True」を返す。
違う場合は、「False」を返す。
※クラス型のリストの場合は、比較できないため今回は「Name」でstring型のリストを作り、string型のリストで比較している。

①Trueを返すコード

SequenceEqualメソッド(True)

②Falseを返すコード

SequenceEqualメソッド(False)

表示結果 ①

◆まとめ

いかかでしょうか。
かなりざっくりしたまとめ方だけど、だいたいこんな感じで使ってます。

間違っている箇所があれば、コメントにお願いします!

〔C#〕〔LINQ〕LINQはいいぞ Part1

どうも、MacBookのトラックパッドで右手首を痛めたぺやんぐ(@peyangu485)です。

今回は、C#の素晴らしい機能である「LINQ」で私がよく使っているメソッドを紹介します。
※今回紹介するのは一部であり、他にも優れたメソッドがあるので興味がある方は調べてみてください。(気が向いたら記事に書くかも)



◆下準備

・LINQを使うために必要なデータクラスを作る。

Personクラス

・リストにデータを追加する。

LINQ説明用Program.cs

これで下準備完了。

◆Select

Selectメソッドでは、指定したデータを取得する。
今回はPersonクラスのNameプロパティを取得、表示する。

Selectメソッド

とすれば、Nameの一覧が表示される。

表示結果

◆Where

Whereメソッドでは、指定した条件のデータを取得する。
今回はNameが「とぅーびー」のデータを取得、表示する。

Whereメソッド

表示結果

◆OrderBy

OrderByメソッドでは、指定したデータについて昇順で並び替える。
今回は年齢の昇順で表示する。

OrderByメソッド

表示結果

◆OrderByDescending

OrderByDescendingメソッドでは、指定したデータについて降順で並び替える。
今回は年齢の降順で表示する。

OrderByDescendingメソッド

表示結果

◆Take

Takeメソッドでは、指定した数分のデータをリストの先頭から取得する。

Takeメソッド

表示結果

後半へ続く

新人プログラマに読んでおいて欲しい書籍3冊

どうも、満員電車は位置取りゲームの1種だと思うぺやんぐ(@peyangu485)です。

今回は、4月ということで今月からプログラマとして働く人達に読んでおいて欲しい書籍の紹介をします。

では、さっそく……。




1.リーダブルコード

プログラマの必読書、リーダブルコード。

これを読んでない人とは仕事したくないってぐらい大事。

変数名などの命名の考え方とか、冗長にならないコードの書き方とかが学べる。

プログラムがある程度書けるようになったら、是非読んでもらいたい。


2.人月の神話

これは、プログラムとは直接関係ないけど、読んでおくといいかなーって本。

実は、私もまだ途中なので細かくは言えない……。(じゃあ紹介するなよ)

他のブログとか見てると、「読んだ方がいいよー」って声が多かったので、一応。


3.なぜ、あなたの仕事は終わらないのか スピードは最強の武器である

これも、プログラムの本というわけではないけど、プログラムをしていく上での考え方として知っておくといいかなって意味でおすすめ。

この本を読んだら、

  • 8割のものを自身の最速で作る
  • 動かして確認しながら残りの2割を完成させる

を意識しながら、「自身の最速」をスケジュールの2割の時間で終わるように工夫していく。

プロトタイプの作成 ⇒ 作成時間の優先順で、最初は取り掛かるといいと個人的には思う。

じっくり考えてプログラムを組むことも大事だけど、トライアンドエラーを繰り返す方が結果的に早いこともあるので試してみましょう。




◆まとめ

3冊だけですが、紹介してみました。
気になった本があれば上記のリンクから買ってね!

私自身の読書量の少なさが露呈しているなぁと書いてて思った。
もっと読まないとね……。

他のブログではもっといろいろ紹介しているので、いろいろ見て回るといいよ。

「動けばいい」の精神が1日も早く無くなることを目指して、お互い頑張りましょう。

〔C#〕〔Xamarin〕The $(TargetFrameworkVersion) for Xamarin.Forms.Platform.Android.dll (v7.0) is greater than the $(TargetFrameworkVersion) for your project (v6.0).

発生!謎警告!

Xamarinで勉強中に、タイトルにある警告がいきなり出てくるようになり、二進も三進も行かなくなった。

3つ出てきてる(以下参照)
f:id:peyangu485:20170322154026p:plain:h90

v7.0が必要だけど、おたくのプロジェクトのバージョンはv6.0でっせってことなんだろうけど、何勝手に出てきてんの……。
して、どこをいじれば上がったことになるんですかねぇ……。

対処

Droidプロジェクトのプロパティを開いて
f:id:peyangu485:20170322154750p:plain

Compile using Android versionとTarget Android versionを以下のように変更したら、今度はエラーが!!
f:id:peyangu485:20170322155036p:plain

f:id:peyangu485:20170322155122p:plain:h40

Android7.0(API 24)をインストールすればええんかな?
てことで、SDK Managerを開いてAndroid7.0(API 24)をインストール。

で、起動!

◆まとめ

解決方法は、「SDK Managerで言われたバージョンをインストールしましょう。」です。

〔C#〕GrapeCity MultiRow8.0J CellLeaveイベントでのセルの値の変更前、変更後チェック

◆目的

GrapeCity MultiRow8.0J CellLeaveイベントでのセルの値の変更前、変更後チェックの仕方を覚える。

◆方法

すごく単純なやり方だが、CellEnterイベントで現在の値を保持して、CellLeaveでCurrentCellのValueと比較するだけ。

El TabelleだとActiveCellとCellではValueの値が異なるみたいなので、その2つを比較するだけで良いが、MultiRowでActiveCellがCurrentCellに変わり、Valueが 同じ値を指すようになっているため、同じやり方ができなくなっている。

◆まとめ

すっきりする方法はあるかと思うが、メモとして残しておく。 Cellのプロパティをざっと見た感じだと持ってなさそうに見えた。

〔C#〕〔Xamarin〕ViewCellでListViewの表示をカスタマイズする(テーブル風)

今日は密かに開発、使用しているアプリの開発で詰まって解決したお話を。

目的

ListViewを用いて表形式にデータを表示する。
1行に複数のデータを表示するという意味。

実装

要は、StackLayoutの設定の「Orientation」に対して「"Horizontal"」を設定して、その中に各種コントロールを配置することで横並びに表示される。
以下、コードと画面のスクショ。

コード
f:id:peyangu485:20170305230920p:plain

画面スクショ
f:id:peyangu485:20170305230924p:plain

まとめ

なんでこんな簡単なことに気づかなかったんやって感じ……。

Xamarinはまだまだ不慣れだけどこれぐらいのアプリならサクッと作れるあたりすごいなぁと感じる。
今回画面のスクショとしてあげたアプリについては後日詳細を紹介するかも?
一応、リリース予定のアプリ。 シンプルな作りが売り()

〔C#〕わーい、すごーい

今流行りのけものフレンズに乗っかっていくスタイルな記事。

目的

目的など不要。
わーい! すっごーい!

経緯

C#が好きなフレンズなので。

実装

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Friends
{
    class Program
    {
        static string[] skill = new string[] {"C#","クソリプ","エアプ","煽り","扇風機であぁぁぁってするやつ","" };

        static void Main(string[] args)
        {
            bool loop = true;
            while (loop)
            {
                Console.WriteLine("1:わーい 2:すごーい 3:たのしー 4:任意文字列 5:らんだむー 6:おわりー");
                var input = Console.ReadLine();
                switch (input)
                {
                    case "1":
                        Wai();
                        break;

                    case "2":
                        Sugoi();
                        break;

                    case "3":
                        Tanoshi();
                        break;

                    case "4":
                        Console.Write("文字列>");
                        Friends(Console.ReadLine());
                        break;

                    case "5":
                        Random();
                        break;

                    case "6":
                        loop = false;
                        break;

                    default:                        
                        break;
                }
                Console.WriteLine();
                Console.WriteLine();
            }
        }

        static void Wai()
        {
            Console.Write("わーい");
        }

        static void Sugoi()
        {
            Console.Write("すごーい");
        }

        static void Tanoshi()
        {
            Console.Write("たのしー");
        }

        static void Friends(string skill)
        {
            Console.WriteLine("君は" + skill + "がとくいなフレンズなんだね!!");
        }

        static void Random()
        {
            System.Random ran = new System.Random();
            int count = ran.Next(10);
            for (int i = 0; i < count; i++)
            {
                switch (ran.Next(4))
                {
                    case 0:
                        Wai();
                        break;

                    case 1:
                        Sugoi();
                        break;

                    case 2:
                        Tanoshi();
                        break;

                    case 3:
                        Friends(skill[ran.Next(5)]);
                        break;
                }
            }
        }
    }
}

コンソールアプリケーションでの実装になりますた。
指定の番号入力で対応する文字を出力するシンプルな作り。

「らんだむー」に関しては、上で定義している配列からランダムで出力するだけ。
たまに、すごい組み合わせになるから面白い。
もっと凝ろうかと思ったけど、なんとなく面倒になったのでこれで終わり。

動作

f:id:peyangu485:20170221234704p:plain

まとめ

これでみんなもフレンズだね!!

〔C#〕〔ASP.NET〕showModalDialogの呼び出し時に親画面のスクロール位置が初期位置に戻ってしまうのを防ぐ


まるで、ラグのよう。
どうも、ぺやんぐです。


ASP.NETは難しいねってお話。

◆目的

JavaScriptで子画面を表示した時に親画面のスクロール位置を保持できるようにする。


◆経緯

ASP.NETで開発をしていて、子画面を表示した時に親画面のスクロール位置がリセットされた。
MaintainScrollPositionOnPostbackをtrueにしているにも関わらず……。

子画面はJavaScriptのwindow.showModalDialogを使用して開いている。
ボタンクリックイベントからJavaScriptの設定をしている。

とまぁ、こんな状況だったんで解決方法を調べてみると意外と見つからなくて少々困った。(よくある話だと思ってた)
結局、微妙な英語力を頼りに見つけたのが以下の記事
https://forums.asp.net/t/1759352.aspx?call+function+after+maintainScrollPositionOnPostback+

なんとなーく、同じ悩みな気がする……。
これかなってことで、ごちょごちょしてみると期待通りの動きをしたので日本語版としてここに残しておこうと思う。


◆実装

以下コード


showModalDialogの呼び出し時に親画面のスクロール位置が初期位置に戻ってしまうのを防ぐ


細かい動きが追えていないので、はっきりとは言えないがどっかのタイミングでスクロール位置がリセットされるのを、「if (WebForm_RestoreScrollPosition) WebForm_RestoreScrollPosition();」この1文(2文?)で再度セットしているみたい。
個人的には原理不明のまま使うのは嫌なんだけど、検索力が低いためこれに関する情報が手に入らなかった……。(英語が読めていないだけの可能性……)

MaintainScrollPositionOnPostbackをtrueにしている時はhtmlソースに「window.onload = WebForm_RestoreScrollPosition;」が追加されるので、あながち変な実装でもないと思いたい。(願望


◆まとめ

こんな中途半端な状態で記事にするのはどうかと思ったけど、同じような悩みの人の足掛かりにでもなれれば幸い……。
詳しい方はぜひコメントをお願いいたします。