Labyrinth of Wisdom

-This is My Archive-


【Visualforce】入力フォームの行追加と行削除サンプル

Visualforceでの行追加・削除機能のサンプルです。 結構色んな要素を使ってて思ったよりもややこしかったので、忘れないうちにメモします。

行追加

これは思ってたよりも簡単に実装できます。

Accountのリスト型変数accountListを作成して、コンストラクタでAccount型の変数accountをnewしてaddします。 こうすることで画面に遷移した際に、空のテキストボックスが1行表示されます。

追加もこれと同じ要領で、追加ボタンを押した際に空のaccountがnewされて、accountListにaddされればいいのです。

ただし、今回のサンプルではテキストボックスの項目が必須になっている為、一工夫してやらないとうまく追加されません。 Visualforceの方で、追加ボタンのコードにimmediate="true"を設定してやることでこの問題を解決しています。

このimmediate="true"というのは全ての検証ルールをスキップすることが出来るという事を意味します。(デフォルトはfalse) immediate="true"を指定せずに追加ボタンを押すと、必須項目に値が入っていないと怒られてしまいます。

» 【Salesforce】apex:inputFieldの必須チェック回避【Visualforce】技術ブログ

行削除

こちらが色々な要素が入っていて意外とややこしいです。 まずパッと思いつくのは、accountListから要素を削除したらいけそうだな、となりますよね。

でもaccountListのインデックス(添え字)を指定してやらないと自分が削除したい行が消せないので、画面で指定した行番号を取得しないといけないという事になります。 なのでまず任意の行番号を取得するロジックが必要になります。

行番号指定

行番号指定には、Visualforceのvariableというコードを使用します。 これはVisualforce内で変数を設定できるコードみたいです。

pageBlockTableの上にvariableを置き、変数countを初期値0でセット。 pageBlockTable内で要素がループする前に再度variableを置き、countに1を加算。 これで一行目には0、二行目には1と、行番号がセットされます。

行番号送信

次に、この各行にセットされた数値をコントローラに渡してやる必要があります。 渡すタイミングとしては削除ボタンを押下した時なので、その辺りに仕込みます。

まずcommandButtonactionに行削除メソッドを指定、こちらにも同じ理由でimmediate="true"を指定します。 さらにreRenderに再描画したい範囲を指定してやります。 今回はform全体を再描画したいので、formのid値(form)を指定します。

commandButtonタグの間にparamをセットします。 paramnameに適当な値を指定、valueに行番号である変数countを指定します。 これで削除ボタンを押下した際にこのparamにセットした変数count送信されます。

行番号取得

コントローラで送信された行番号を取得していきます。

行削除メソッドでSystem.currentPageReference().getParameters().get('xxx')を使用して送信された行番号を取得します。 xxxの部分はparamnameで指定した値です。

取得した値をInteger型に変換して、変数rowNumberに代入します。 入力フォームが一行しかない場合は削除したくないので、accountListのサイズが1より大きい場合のみrowNumberのインデックスの要素を配列から削除します。

f:id:Labyrinth_of_Wisdom:20170208120534p:plain

サンプルコード

public class AddDeleteRowController {

    public Account[] accountList {get;set;}
    public Integer rowNumber {get;set;}

    // コンストラクタ
    public addDeleteRowController(){
        accountList = new List<Account>();
        Account account = new Account();
        accountList.add(account);
    }

    // 行追加
    public void addRow(){
        Account account = new Account();
        accountList.add(account);
    }

    // 行削除
    public void deleteRow(){
        // 行番号取得
        rowNumber = Integer.ValueOf(System.currentPageReference().getParameters().get('number'));
        // 一行以上の時に削除可能
        if(accountList.size() > 1){
            accountList.remove(rowNumber);
        }
    }

}
<apex:page controller="AddDeleteRowController" showHeader="false" sidebar="false" >
    <apex:pageBlock title="取引先">
        <apex:form id="form">
            <!-- 行追加ボタン -->
            <apex:commandButton value="追加" immediate="true" action="{!addRow}" />
            <!-- インデックス取得用の変数 -->
            <apex:variable value="{!0}" var="count"/>
            <apex:pageBlockTable value="{!accountList}" var="item">
                <!-- 行削除ボタン -->
                <apex:column headerValue="行操作">
                    <apex:commandButton value="削除" immediate="true" action="{!deleteRow}" reRender="form" >
                        <!-- 行のインデックスを送信する -->
                        <apex:param name="number" value="{!count}" />
                    </apex:commandButton>
                    <!-- ループするごとに+1 -->
                    <apex:variable value="{!count + 1}" var="count"/>
                </apex:column>
                <apex:column headerValue="名称">
                    <apex:inputField value="{!item.Name}"/>
                </apex:column>
            </apex:pageBlockTable>
        </apex:form>
    </apex:pageBlock>
</apex:page>

【Windows】Shipping Toolで画像が保存できない

Windows標準の画像領域切り取りアプリ、Shipping Toolで画像を切り取った後に保存ができないトラブルが発生しました。

症状を具体的にいうと、「アプリの起動→画像の切り取り」まではできるんですが、保存しようとしても何も動かないという状態です。

結論から言うと、Shipping Toolの保存先が標準でピクチャフォルダになっているのですが、この保存先が見当たらない場合は保存できないみたいです。 自分の普段の環境はノートパソコンに外付けストレージを付けて、そこにドキュメントフォルダやピクチャフォルダを紐づけているんですが、操作した時は外付けストレージを外していたのでこの現象が起こったみたいです。

分かってしまえば単純なんですが、エラーメッセージなどが何も出ないので気付けませんでした。 同じ症状が起こった人は参考にしてみてください。

【Visualforce】renderedを使用した表示・非表示の判定

Visualforceで、ある条件の時に表示非表示にする機能、つまりVisualforce内でIf文みたいなものが出来ないか調べたのでメモ。

結論としてはoutputPanelタグのrendered属性を利用すればできました。renderedがtrueなら表示、falseなら非表示になります。(デフォルトはtrue)

RenderTestPage1で「開けゴマ!」と入力したら次のページに文字が出るという簡単なサンプルを作成してみました。

<!-- RenderTestPage1 -->
<apex:page Controller="RenderTestController">
    合言葉は「開けゴマ!」
    <apex:form>
        <apex:inputText value="{!input}"/>
        <apex:commandLink action="{!nextPage}">次のページへ</apex:commandLink>
    </apex:form>
</apex:page>

inputCheckというメソッドを使用してtrue OR falseを取得する場合と、renderedにif文の数式を書いてやればそこで表示判定をすることも可能です。

<!-- RenderTestPage2 -->
<apex:page Controller="RenderTestController">
    <div>
        <apex:outputPanel rendered="{!inputCheck}">
            正解!
        </apex:outputPanel>
    </div>
    <div>
        <apex:outputPanel rendered="{!IF(input='開けゴマ!',true,false)}">
            正解!
        </apex:outputPanel>
    </div>
</apex:page>
public class RenderTestController{

    // RenderTestPage1での入力値
    public String input {get;set;}

    // コンストラクタ
    public RenderTestController(){

    }

    // 合言葉判定メソッド
    public Boolean getInputCheck(){
        if(input.equals('開けゴマ!')){
            return true;
        }else{
            return false;
        }
    }

    // ページ遷移メソッド
    public PageReference nextPage(){
        return Page.RenderTestPage2.setRedirect(false);
    }
}

画面はこんな感じになります。

f:id:Labyrinth_of_Wisdom:20161102113004p:plain

因みにページ遷移のメソッドにsetRedirect(false)付けてるんですが、なくても出来ちゃうんですよね。 付けてないと変数の保持できなかったはずなのに。。

【資格】ウェブデザイン検定3級合格しました

国家資格のウェブデザイン検定3級合格しました。

ぶっちゃけ3級だとあんまり意味ないと思いますが、国家資格を取った!みたいな感じでテンション上げれるので取得するのもいいんじゃないかと思います。 ちょっと自信も付きますし。

ウェブデザイン検定の有用性については下記参照。

勉強方法

公式サイトにて練習問題過去問が公表されているので、それをひたすら解きました。

ただ問題があるのはいいんですが、問題の解説がついていないので、間違った時に根拠が分からずに理解が深まらなくて困っていました。

そんな時にネットで色々探していると、解説を載せてくれている親切なサイトを発見したのでそれを参考に理解を深めていきました。

これでも不安な人は、下記の本が試験対策テキストとして販売されているみたいなので買ってみてください。

受けた感想

実技試験は過去問でちゃんと練習しててHTMLとCSSの知識がある程度あれば、はっきり言って楽勝だと思います。

ただ意外に難しいのが学科試験。結構幅広い範囲で出題してくるし、過去問や練習問題で見たことがないような内容の問題もいくつか出てきたのでちょっと焦りました。

実際、実技だけ受かって学科に落ちる人も結構多いみたいです。(試験会場も学科の人の方が多かった)

それでも割と手軽に取れる国家資格であることには違いないので、是非チャレンジしてみてください。

【J-HIPHOP】FUNKYMIC and the Saturdays Rism - GOTTA NEED FUNK

GOTTA NEED FUNK

韻シストのMC/HumanBeatBoxerのFUNKYMIC韻シスト加入前に活動していたユニット(から後にバンド)FUNKYMIC and the Saturdays Rismが2006年にリリースしたアルバムがカッコいいです。

プロデューサーであるchop the onionの作るトラックはがっつりファンクを意識したサウンドになっており、その上にFUNKYMICのイナタくもスキルフルなラップが相性抜群に絡み合って、まさにヒップでファンキーなアルバムになってます。

韻シスト加入前から既にFUNKYMICのフロウはほぼ完成しており、ビートに対してのアプローチや声の出し方が独創的で面白いです。

FUNKYMICのルーツを知りたい人にもおすすめの一枚。


おまけで2016年にFUNKYMICのソロアルバムで再びchop the onionとタッグを組んだ一曲がこちら。

パッドを同時に鳴らさない設定について

MPC Softwareでハイハットのオープンとクローズを同時に鳴らしたくない時等に行うパッドの設定方法のメモです。

f:id:Labyrinth_of_Wisdom:20160920222617p:plain

画面の赤枠内、A03のパッドにクローズハイハット、画面の青枠内、A04のパッドにオープンハイハットをアサインしています。

この状態で画面緑枠内をクリック、もしくは使用している機材のPROGRAM EDITボタンを押してください。

そうすると下記のような画面になると思います。

f:id:Labyrinth_of_Wisdom:20160920223204p:plain

この画面の赤枠内、MUTE TARGETに同時に鳴らしたくないパッドを4つまで設定することができます。

今回はA03を鳴らすとA04が鳴らなくなるようにしたいので、A03のMUTE TARGETにA04を指定します。

ハイハット以外にも工夫すれば色々使い道があると思いますので試してみてください。

Akai Professional 音楽制作システム 7GB音源付き MPC Studio Black

Akai Professional 音楽制作システム 7GB音源付き MPC Studio Black

【J-HIPHOP】ハルビンズ弐拾五 - 波華横丁皿三昧

波華横丁皿三昧

大阪アンダーグラウンドの雄、SUPPON RECORDS所属のトラックメーカーユニット、ハルビンズ弐拾五が2007年にリリースしたファーストアルバム。

メンバーはEarMadder,GDEN,Hi-Low★Kickの三名。

この三名の作る、濃く癖のあるトラックにSUPPON RECORDS周辺のMCsが負けないくらい濃いスキルフルなラップを乗せています。 しかもこの作品どうやら一日で作成したっぽいことを曲中で言っており、正直とんでもねえなと。

僕の中でこの作品で一番耳に残るのがMCマリヲのラップ。 ねっとりとしたフロウと声で癖になります。

トラックもラップも癖が強くて実験的なものも多く、オリジナリティ溢れるオルタナティブなラップ作品としてオススメです。

尖ったHIPHOPを聴きたい人は是非。