経緯 普段 Mac にて開発を行っているが動作端末は Windows であることが多い そのため、表題のツールを使用することがあるがその際に Mac 上の hosts ファイルと同様の設定をしたい場合があり苦労したため備忘録として残しておく Microsoft Edge Developer(旧Modern IE)について ダウンロードは以下から行う ダウンロードページの「Virtual Machines」より「Virtual machine」と「platform」を選択してダウンロードする 手順 hostsファイルの権限変更 Microsoft Edge Developer 上で以下を行う 「C:/Windows/System32/drivers/etc」に hosts ファイルがある そのファイルを右クリック>Properties>Security>Editボタンで、 Users の権限に全部チェックを入れる Mac の hosts ファイルを複製 Mac の hosts ファイルは「/private/etc/hosts」にあるので、それを前述のファイルに中身をコピーする ※hosts ファイルのループバックアドレスは固定のホスト側のIPアドレスに置き換えて記述すること Rails での確認の際の注意点 確認作業を Rails で行う場合には追加で以下の作業を行う IEの場合 サーバの起動の際に以下のコマンドで行う bundle exec rails s -b 0.0.0.0 インターネットオプションのLocal intranetに「localhost:3000」を登録 Edgeの場合 サーバの起動の際に以下のコマンドで行う bundle exec rails s -b 0.0.0.0 インターネットオプションの Local intranet に「localhost:3000」を登録 about:flags を入力し、「Developer Settings」の「allow localhost loopback(this might put your device at risk)」のチェックを外す

ここ最近今まで縁のなかった確定申告や高額医療制度のお世話になることがあった 上記のこともあり知識として必要だと感じため、学習しその記録を残しておく 受験する科目 学科 FP 協会・金融財政事情研究会で共通 実技 ※難易度的には FP 協会の「資産設計提案業務」が初心者には易しいらしい FP 協会 資産設計提案業務 金融財政事情研究会 個人資産相談業務 ※今回受験 保険顧客資産相談業務 使用する教材 今回使用する教材は以下 2018-2019年版　みんなが欲しかった！　FPの教科書3級 滝澤ななみ TAC 2018年05月22日 売り上げランキング : 楽天ブックスで購入Amazonで購入 by ヨメレバ 他の人の評価等を確認する限り、これ１冊でもいけそう 必要があれば追加で購入する とりあえず、5月の受験を目指す 2019/03/26 追記 試験用の電卓を購入 CANON HS-1220TUG 実務電卓 12桁楽天市場で購入Amazonで購入by カエレバ こっちと迷ったが現状だとあまり必要なさそうなので安さで選択上位の級で必要になれば購入する

JQueryの取得した要素分繰り返すeachを使用した場合にeachの内部でCoffeeScriptの@を使用するとJQueryのthisとして扱われてしまいReferenceErrorが発生する その場合は以下のように修正する 実際のソース 修正前 processRows: -> $("#my-table>tr").each -> id = $(this).attr("id") @processRow id 修正後 processRows: -> $("#my-table>tr").each (index, element) => id = $(element).attr("id") @processRow id

経緯 web アプリでランキング画面のようにリスト内の自分の行を中心に表示のようなことを行いたい場合があり調査した結果を備忘録として残しておく 実際のソースおよび実行結果 画面初期表示時に id = 1(Taro) のデータをスクロールエリアの中央に表示する created のタイミングで API 等からデータが取得される想定のため変数 users 監視しておいて変わったタイミングで画面中央にスクロール位置を移動させる 例はスクロールエリアの height が固定のパターンであるが可変の場合は画面サイズを使用して計算する

経緯 CSS で3点リーダーを表示したい場合がよくあるが複数行の場合でも同様の対応を行いたい場合があり調査した結果を備忘録として残しておく 実際のソースおよび実行結果

経緯 最近、周りで VB.NET を使っている人が複数人出てきた恐らく2020年にWindows7 サポート終了となるため VB6 => VB.NET へのコンバージョンの案件が増えていると思われる そのため、以前行った際に苦労したふりがな機能について備忘録として残しておくことにする 実際のコード ふりがな取得機能の実装クラス 以下のふりがなに対応(半角および全角英数はそのまま取得) ひらがな 全角カナ 半角カナ Option Strict Off Option Explicit On Imports System.Runtime.InteropServices Delegate Function fncDelegate(ByVal hWnd As Integer, ByVal uMsg As Integer, ByVal wParam As Integer, ByVal lParam As Integer) As Integer ''' <summary> ''' 変換イベントクラス ''' </summary> Public Class ConvertedEventArgs Inherits EventArgs ''' <summary> ''' 変換イベントクラスのコンストラクタ ''' </summary> ''' <param name="f">ふりがな文字列</param> ''' <param name="r">変換後文字列</param> Public Sub New(ByVal f As String, ByVal r As String) Furigana = f Result = r End Sub Public ReadOnly Property Furigana() As String Public ReadOnly Property Result() As String End Class ''' <summary> ''' 自動ふりがな取得クラス ''' </summary> Public Class Imecomp Private m_TxtSrcControl As Control Private m_TxtDestControl As Control Private WithEvents M_MsgListner As MsgListner Private ReadOnly m_StrConvMode As Integer ''' <summary> ''' ふりがな取得完了通知イベント ''' ''' ふりがな取得が完了したことを通知する ''' </summary> ''' <param name="txtSrc">ふりがな取得対象テキストボックス</param> ''' <param name="txtDest">ふりがな出力対象テキストボックス</param> ''' <param name="e">変換イベントクラス</param> Public Event Converted(ByVal txtSrc As System.Object, ByVal txtDest As System.Object, ByVal e As ConvertedEventArgs) ''' <summary> ''' メッセージリスナークラス ''' </summary> Private Class MsgListner Inherits NativeWindow 'Windows Message Public Const WM_IME_COMPOSITION As Integer = &H10F Public Const WM_IME_ENDCOMPOSITION As Integer = &H10E Public Const WM_CHAR As Integer = &H102 Public Const WM_KEYDOWN As Integer = &H100 Public Const WM_KEYUP As Integer = &H101 'IME APIs Declare Function ImmGetCompositionString Lib "imm32.dll" Alias "ImmGetCompositionStringA" (ByVal hIMC As Integer, ByVal dw As Integer, ByRef lpv As Byte, ByVal dw2 As Integer) As Integer Private Const GCS_COMPREADSTR As Integer = &H1 Private Const GCS_COMPSTR As Integer = &H8 Private Const GCS_RESULTREADSTR As Integer = &H200 Private Const GCS_RESULTSTR As Integer = &H800 Declare Function ImmGetOpenStatus Lib "imm32.dll" (ByVal hIMC As Integer) As Integer Declare Function ImmSetOpenStatus Lib "imm32.dll" (ByVal hIMC As Integer, ByVal fOpen As Boolean) As Integer Declare Function ImmGetContext Lib "imm32.dll" (ByVal hWnd As Integer) As Integer Declare Function ImmReleaseContext Lib "imm32.dll" (ByVal hWnd As Integer, ByVal hIMC As Integer) As Integer 'Subclass APIs Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" (ByVal hWnd As Integer, ByVal nIndex As Integer, <MarshalAs(UnmanagedType.FunctionPtr)> ByVal dwNewLong As fncDelegate) As Integer Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" (ByVal hWnd As Integer, ByVal nIndex As Integer, ByVal dwNewLong As Integer) As Integer Private Const GWL_WNDPROC As Integer = (-4) Declare Function CallWindowProc Lib "user32" Alias "CallWindowProcA" (ByVal lpPrevWndFunc As Integer, ByVal hWnd As Integer, ByVal msg As Integer, ByVal wParam As Integer, ByVal lParam As Integer) As Integer Private m_Enabled As Boolean = True Private convMode As Integer = 0 Private pramStrConvMode As Integer = 0 Public Event Converted(ByVal imeCompString As String, ByVal resultConvString As String) Public Property Enabled() As Boolean Get Return m_Enabled End Get Set(ByVal Value As Boolean) m_Enabled = Value End Set End Property ''' <summary> ''' ふりがな取得対象コントロールのウィンドウプロシージャ ''' </summary> ''' <param name="m">Windows メッセージ</param> Protected Overrides Sub WndProc(ByRef m As System.Windows.Forms.Message) Dim hIMC As Integer Dim intLength As Integer If m_Enabled Then Select Case m.Msg Case WM_IME_COMPOSITION Dim bytBuff() As Byte Dim strResult As String = "" Dim strFurigana As String = "" hIMC = ImmGetContext(Me.Handle.ToInt32) '変換後文字列の取得 intLength = ImmGetCompositionString(hIMC, GCS_RESULTSTR, 0, 0) If intLength > 0 Then ReDim bytBuff(intLength - 1) ImmGetCompositionString(hIMC, GCS_RESULTSTR, bytBuff(0), intLength) strResult = System.Text.Encoding.Default.GetString(bytBuff) End If 'ふりがな文字列 intLength = ImmGetCompositionString(hIMC, GCS_RESULTREADSTR, 0, 0) If intLength > 0 Then ReDim bytBuff(intLength - 1) ImmGetCompositionString(hIMC, GCS_RESULTREADSTR, bytBuff(0), intLength) strFurigana = System.Text.Encoding.Default.GetString(bytBuff) convMode = IIf(pramStrConvMode = 0, vbNarrow, pramStrConvMode) '追加する文字種の判断 If ChrIsNarrow(StrConv(strResult, VbStrConv.Narrow)) Then strFurigana = strResult End If 'テキストを追加 Select Case convMode Case VbStrConv.Narrow strFurigana = StrConv(strFurigana, VbStrConv.Narrow) Case VbStrConv.Katakana strFurigana = StrConv(strFurigana, VbStrConv.Wide) Case Else strFurigana = StrConv(StrConv(strFurigana, VbStrConv.Wide), convMode) End Select 'イベント起動 RaiseEvent Converted(strFurigana, strResult) End If ImmReleaseContext(Me.Handle.ToInt32, hIMC) Case WM_CHAR '半角英数字 hIMC = ImmGetContext(Me.Handle.ToInt32) If ImmGetOpenStatus(hIMC) = 0 Then If m.WParam.ToInt32 >= 32 Then 'イベント起動 RaiseEvent Converted(Chr(m.WParam.ToInt32), Chr(m.WParam.ToInt32)) End If End If ImmReleaseContext(Me.Handle.ToInt32, hIMC) End Select End If MyBase.WndProc(m) End Sub ''' <summary> ''' メッセージリスナークラスのコンストラクタ ''' </summary> ''' <param name="target">入力文字</param> ''' <param name="strConvMode">文字変換モード</param> Public Sub New(ByVal target As IntPtr, ByRef strConvMode As Integer) pramStrConvMode = strConvMode AssignHandle(target) End Sub Protected Overrides Sub Finalize() ReleaseHandle() MyBase.Finalize() End Sub ''' <summary> ''' 半角文字かどうかを判定して返す ''' </summary> ''' <param name="target">ふりがな取得対象テキストボックス</param> ''' <returns>true:半角文字/false:半角文字以外</returns> Public Function ChrIsNarrow(ByRef target As String) As Boolean Dim nPt As Integer Dim NowPt As Integer Dim NowCode As Integer Dim fNarrow As Boolean fNarrow = True nPt = Len(target) For NowPt = 1 To nPt NowCode = Asc(Mid(target, NowPt, 1)) If NowCode < 0 Or NowCode > 255 Then fNarrow = False Exit For End If Next NowPt ChrIsNarrow = fNarrow End Function End Class ''' <summary> ''' 自動ふりがな取得クラスのコンストラクタ ''' </summary> ''' <param name="txtSrc">ふりがな取得対象テキストボックス</param> ''' <param name="txtDest">ふりがな出力対象テキストボックス</param> ''' <param name="strConvMode">ふりがなの種類</param> Public Sub New(ByVal txtSrc As Control, txtDest As Control, strConvMode As Integer) M_MsgListner = New MsgListner(txtSrc.Handle, strConvMode) m_TxtSrcControl = txtSrc m_TxtDestControl = txtDest End Sub Public ReadOnly Property TxtSrcControl() As Control Get Return m_TxtSrcControl End Get End Property Public ReadOnly Property TxtDestControl() As Control Get Return m_TxtDestControl End Get End Property Public Property Enabled() As Boolean Get Return M_MsgListner.Enabled End Get Set(ByVal Value As Boolean) M_MsgListner.Enabled = Value End Set End Property Private Sub M_MsgListner_Converted(ByVal imeCompString As String, ByVal resultConvString As String) Handles M_MsgListner.Converted RaiseEvent Converted(Me.TxtSrcControl, Me.TxtDestControl, New ConvertedEventArgs(imeCompString, resultConvString)) End Sub End Class ふりがな取得機能テスト用フォーム 初期処理時にふりがな種別を指定する

確認環境 Windows10 Rambox: 0.6.3 経緯 普段、 仕事で Chatwork や Slack を使用しているが別々のアプリを切り替えるのが手間だったためまとめて管理できるツールがないか調査した 候補 Franz Station Rambox Franz, Station だと ChatWork で PDF ファイルのプレビューを表示した際にダウンロード用のダイアログが表示されるため 「保存」 => 「PDF を開く」の手間が発生してしまうため Rambox に決定 Rambox の ChatWork の挙動 Rambox で ChatWork をサービスとして追加した場合自分にメンションがついているメッセージの場合は以下のようにバッジと未読数が表示される Rambox バッジおよび未読数 しかし、自分にメンションがついていないメッセージについてはバッジおよび未読数は表示されないため見逃してしまう 対処方法 Rambox のサービス設定画面でカスタムコードを使用して対応する ※未読数(未読のあるルーム数) アプリ版 ChatWork と同じ挙動 Rambox サービス設定画面 実際のコード [Custom Code] function checkUnread() { const elements = document.querySelectorAll(".roomListBadges__unreadBadgeText"); updateBadge(elements.length); } function updateBadge(e) { e >= 1 ? rambox.setUnreadCount(e) : rambox.clearUnreadCount(); } setInterval(checkUnread, 3000);

確認環境 Vue.js: v2.6.7 方法 読み込み開始検知 img タグの :src に展開する URL を変数化 ※1 Vue.js 側の watch で1.の変数を監視 ※2 読み込み完了検知 img タグに以下のイベントを追加 v-on:load="メソッド名" ※3 Vue.js 側に1.で指定したメソッドを定義 ※4 実際のソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像の読み込みの開始および完了を検知する方法</title> </head> <body> <div id="app"> <img :src="url" v-on:load="load" /> <!-- ※3 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { url: "https://raw.githubusercontent.com/vuejs/art/master/logo.png" // ※1 }, methods: { // ※4 load: function() { console.log('loaded'); }, } }); // ※2 app.$watch('url', function(val, oldVal) { console.log(val); }); </script> </body> </html> 実行結果

確認環境 ruby: ruby 2.5.3 rails: rails 5.2.2 方法 Mysqlの FIELD 関数を使用する※FIELD 関数の結果で ORDER BY する 例. レコードを order 昇順, user_id 昇順で並び替える場合 ※同じ順位の場合は自分を優先 order(:order, ["field(user_id , #{current_user.id}) desc"], :user_id) ※ ポイントとしては第２ソートキーの前に ORDER BY FIELD を使用すること また、ORDER BY FIELD で指定した分に対して desc を指定すること ※ desc を指定しないと自分以外が優先的に並び替えられてしまう)

テーブル構成例 [Nodesテーブル] 最上位のノード以外は親ノードを持っている idnameparent_id1parrent_nodenull2child_node_113child_node_214child_node_1_125child_node_1_226child_node_2_137child_node_2_23 確認環境 ruby: ruby 2.5.3 rails: rails 5.2.2 実際のコード class Node < ApplicationRecord has_many :children, class_name: "Node", foreign_key: "parrent_id" belongs_to :parrent, class_name: "Node", optional: true # rails5 から default が require になっているため　`optional: true` を指定しないと `nil` での保存が不可 end class CreateNodes < ActiveRecord::Migration[5.2] def change create_table :nodes do |t| t.string :name t.references :parrent t.timestamps end end end 実行例 テーブル構成例のデータが格納済の状態