CSS Hack:after疑似要素を使って親要素の幅を突破する(ように見せる)

メモ
親要素の幅が固定されている状態で、子要素の幅を画面幅いっぱいに広げたい。
こういうやり方もあるのかと思い。結局コンテンツ自体の幅は制限されるけれども。

こうなる
20170630_csshack

HTML

CSS

JS Bin
https://jsbin.com/suluxohewo/1/edit?html,css,output


Posted in css

[SFDC]IE11×コミュニティの公開Visualforceページ上でクロスドメインAjaxが動かない件(IServerXMLHTTPRequest2)

IServerXMLHTTPRequest2 とかいう謎オブジェクト

  • Visualforceベースのコミュニティの外部に公開しているVisualforceページ
  • IE11でアクセス

上記の条件で、Visualforce内にクロスドメインなAjax処理を書いてもうまく動かない。
(サーバ側はちゃんとCORSのヘッダ返却してる)

こういうシンプルなやつ。2行目のopenするところでこけて「SCRIPT5 アクセスが拒否されました」エラーが発生する。
もちろんChrome、Firefoxは動くし、IE11の場合もコミュニティログイン後の画面であれば全く同じ記述で動く。
IE11かつコミュニティの公開ページでのみエラーになる。
どうやら new XMLHttpRequest();IServerXMLHTTPRequest2 という謎のオブジェクトが返却されていることが原因のようだ。この謎オブジェクトがクロスドメイン通信に対応していないっぽい。

偉大な先人が同じ罠にはまって解決していた。

Javascript in Visualforce: new XMLHttpRequest() returns IServerXMLHTTPRequest2 object only on Salesforce/IE

こうすれば良い。素のXMLHttpRequestはSarissa.originalXMLHttpRequestに格納されているのでそこから取るようにする。
Sarissaてなに?と思ってググると古のJSライブラリなのな。それがコミュニティの外部公開ページで使われてると。いやーこれはなかなか気付けなくて焦った。勘弁してほしー

コミュニティもLightningベースで構築しろってことかな。


[SFDC][AWS]VisualforceからS3に直接ファイルアップロードする(署名バージョン4)

メモ〜

SalesforceのVisualforce画面からS3にファイルをアップロードする必要が生じました。
Apexで扱えるファイルサイズに上限があったりして面倒なのですが、AWSはHTML FORMに認証情報(を基に計算した署名)を埋め込んでファイルと一緒にPOSTしてファイルアップロードする方法を提供してくれているのでこの方法を利用しようと思います。前のエントリと同じく、署名は最新のバージョン4の方法で行います。

Browser-Based Upload using HTTP POST (Using AWS Signature Version 4)

※ファイル送信自体はVisualforce(上に書いたJS)からですが、署名の計算はJavascriptRemotingを経由してサーバ側のApexで行います。
※HTML5ありきで実装したので楽なもんでした。

■Visualforce

■Apex

あとS3のバケットにCORSの設定が必要です。
今回はHerokuのアドオンであるところのbucketeerを利用していたため、以下の情報を参考に設定しました。
https://devcenter.heroku.com/articles/bucketeer#updating-cors-settings


[SFDC][AWS]S3上の非公開ファイルにアクセスするためのPre-Signed URLをApexで生成する(v4)

メモ〜

S3上の非公開ファイルをSalesforceの画面に表示させる必要が生じました。
AWSには、APIのアクセスキーと秘密キーをもとに計算した署名情報をファイルのURLにクエリ文字列として引っ付けてリクエストすると一時的に認証してくれる便利な機能がありまして、これを利用しようと思いました。
http://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4-add-signature-to-request.html

結構前に書いたAmazonS3とSalesforceの連携方式の検討みたいなエントリで同じようなことやった記憶があったので余裕でしょと思ってたらAWSの署名方式が変わっていて通用しなくなっていました。。最新の方式(AWSSignatureVersion4)を調べつつ実装しました。

公式ドキュメントに従って実装したらできました。
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/API/sigv4-query-string-auth.html

こんな感じ。

{BUCKET_NAME}、{REGION_NAME}、{ACCESS_KEY_ID}、{SECRET_KEY}などはカスタムメタデータにでも登録しておけば良いのではないでしょうか。


[SFDC]パートナーコミュニティユーザが自社の取引先レコードを編集できるようにしたい

Salesforceのデフォルト仕様:パートナーユーザは自社の取引先を参照のみ可能

SalesforceのPartnerCommunityユーザを有効化すると、そのユーザが所属する取引先に対して「ポータルロール」という種別で「取引先名+ ”パートナー ユーザ”」という名前の共有設定が自動的に追加される。これのアクセスレベルは「参照のみ」となっている。この仕組によって、パートナーコミュニティユーザは自社の情報を参照することができるようになる。

手動設定で編集権限を追加する2つの方法

手動の設定でパートナーユーザに自社取引先への編集権限を与える方法は2つある。

1.共有設定を追加

取引先の共有ボタンから共有設定を追加する。上述の通りデフォルトで追加されている「参照のみ」の共有設定を参考に、その取引先用のポータルロールに対して「参照・更新」を指定した共有設定を作成する。

2.共有ルールを追加する

共有ルールでも同様にポータルロールに対して編集権限を設定できる。

※いずれも取引先ごとに設定する必要がある。

ポータルロールは取引先ごとに作成されるため、上記2つの方法ではパートナー取引先が増えるたびに設定する必要がある。

自動で編集権限を追加したい場合はApexSharingを使う

コミュニティのセルフ登録機能を利用することになった。その上で、パートナーユーザは自社の情報(住所など)を登録後にも自分で編集できる必要があった。
セルフ登録用のコントローラ内で Site.createExternalUser(User u, Id accountId) メソッドを実行することで指定した取引先に所属するパートナーユーザを有効化することができる。
デフォルトでは、パートナーユーザを有効化すると取引先用のポータルロールが自動的にユーザに付与され、上で説明したように参照のみできる状態になる。

今回は Site.createExternalUser 実行後に取引先に対して更新可能な権限のApexSharingを追加してやることで、自動的な編集権限の付与を実現した。

・セルフ登録用コントローラ.cls


[Lightning]コミュニティの詳細画面で使うComponent内でレコードIDを取得する方法

メモ
SalesforceのLightningコンポーネントについて
パートナーコミュニティのレコード詳細画面で使うコンポーネント内でレコードIDを取得したい場面がありました。

Salesforce Winter ’16 リリースノート > Lightning コンポーネント > 新規インターフェース

Winter’16のリリースノートによれば force:hasRecordIdをimplementsに含むことでレコードIDを取得できるように書いてありますが、
コミュニティに組み込んだコンポーネントではこの方法でレコードIDを取得できませんでした。
良い方法が無さそうだったので、仕方なしに以下のように泥臭く危うい感じで対応しました。

■コンポーネント(.cmp)

■コントローラ(Controller.js)

もっとスマートにできないものでしょうか…

すみません、上記は嘘で、2017/05/22現在では、コミュニティでもレコード詳細ページに組み込んだLightningコンポーネント内ではレコードIDの取得ができました。

■cmp

※force:hasRecordIdを書いておく

■controller

これで取れる

参考:https://developer.salesforce.com/blogs/developer-relations/2015/11/building-context-aware-lightning-components.html


Slackからダウンロードした日本語ファイル名が文字化けするのを直すelectronアプリ

Slackから日本語ファイル名がつけられたファイルをダウンロードすると日本語が文字化けしてしまいます。
Slack のファイル名がおかしくなるやつを解読する
※文字化けと言うかユニコードエスケープされてる。

「201612テストふぁいる.xlsx」このファイルが

「201612u30c6u30b9u30c8u3075u3041u3044u308b.xlsx」ダウンロードするとこうなる

とても不便なので文字化けしたファイルをドロップするとファイル名を日本語に戻すだけのElectronアプリを作りました。日本語ファイル名変換君です。めっちゃ単純な処理しかしてませんがElectronの勉強になって良かったです。

説明画像

【参考情報】