CSSとSharePoint #2

mission:SharePointをデコれ☆

インテリ眼鏡ピーターの動画によってちょっとだけやる気が戻ってきた前回。あのまま煮詰まっていたらちゃぶ台返しをするところだったね。あやうく。あやうい。会社にちゃぶ台はない。

今回は、それを踏まえWebパーツの装飾に挑戦です。果敢にも。CSSについては相変わらず妙な理解しかできてないけど、気にしたら負けるので気にせずやります。大丈夫、死にゃしないわ。一応心配なので討ち死にする前に遺志を残しておきますが、今回は「CSSを使ってSharePointのWebパーツを装飾する」がテーマです。

さあれっつ開戦。まずはあれだ、下準備。
毎度おなじみContoso社のチームサイト。右上歯車から、<サイトコンテンツ>に飛びます。「サイトのリソースファイル(SiteAssets)」を選択。

SPcss05

ライブラリから、エクスプローラーで開く。開いたら、ここにテキストファイルを新規作成→ファイル形式を.cssにして保存。この時点では白紙で問題なし。これやっとくと後々ファイルの上書き保存をするだけで、サイトに変更が反映されるので便利☆(って眼鏡動画で学んだ)

…わたしの設定の問題なのかなんなのか、ファイル形式を変更できなかったのでいらっときて別に持ってたcssファイルコピペしました。内容なんか上書きすりゃいいのよ!なんなら全選択からのデリートで真っ白にすりゃ問題なかろ。名前?変えれば問題ないじゃん。てな具合。Shift+Aで全選択、覚えたので使いたいだけかもしれません。反復練習って大事だねって落としどころでいいですか。いいですね。うむ。

SPcss06

CSSファイルが作成できたら、次。
最近おなじみの<サイトの設定>、「外観」から「マスターページ」を選択。

colorpalette11

下の方に「代替CSSのURL」という項目があるので、広げて。参照先を、さっきのCSSファイルに指定。OK。

SPcss04

さてチームサイトに戻りましょうか。こっから本番。

先に、やりたいことを書いておこう。戦術の共有?ヴィジョンの共有とか言うとちょっと意識高いっぽくて、きらーんってなる(マイルストーンとか言われるとカーリングが浮かぶ)。今からするのは、CSSで変更を加えたい個所の表示名(class)を特定するための作業です。なぜ特定が必要なのかというと、場所がわからんと、「赤くしろ」とか言ったところで、一体どこを装飾していいかわからなくてCSSが困るからです。

おーけー?

ブラウザの右上に、歯車マークがあるのでそこをクリック。「F12 開発者ツール」などという謎な選択肢があるので、それを選びます。ないしは単純に「F12」を押すと出てくる。
(IE以外のブラウザに関しては知らん!IEを使え!)

わけのわからんウィンドウが現れますので、何もわからず左上端っこのポインタマーク(⇨)を選択。そのままブラウザ画面上にカーソルを移動させると青い枠組みが出てきます。れっつクリック。そうするとクリックした個所のソースがF12で出現したウィンドウ右側に現れる、という仕組み。
今回知りたいのはWebパーツ部分の変更法、なのでWebパーツにカーソルを合わせます。おっきい枠組みやら、小さい枠組みやらが現れますが、うーん…まあなんとなく雰囲気でこれ、ってやつを選択。ヘッダーチックな個所です。ふむ。

SPcss03

「ms-webpart-titleText」がどうやら、敵のお名前らしいです。下準備しておいたCSSファイルに、コピペ。背景色をグレーに指定。上書き保存。

SPcss01

サイトに戻って更新。

SPcss07

わーい、変色成功。ヤッタネ!!

要はあれなんですね、敵を狙って→攻撃決めて→どん!みたいな仕組み。なるほど、なるほど。狙い撃ち方式。スナイパーになればよろしい、と。(地雷とかマシンガンとかも、あるのだろうか。あるかもしれない、ありうる。)

SPcss08

調子に乗ってやってみた。おおー!!できた!できたよ!!!

成功によりご機嫌なわたくし。(形而上学的)ちゃぶ台は無事、地面の上に存在できそうです。おつかれさまでした。

CSSとSharePoint #1

既に三件ほど「色が目にやさしくない」「見づらい」「毒々しい」とのご意見を賜りました本ブログ。なもんでテンプレートを変更してみました。ちょっと見易くなった気がする。
しかしまあ、平素私服やらなにやらに関しても「柄キチ」だの「色キチ」だのとしょっちゅう評されるわたくしの好み、つまるところ概ね、熱帯有毒系ないしは深海サイケ系。目に優しいひとに易しいシンプルデザインってすごいと思うんですけどね、思うのと、食指が動くかってのはこれ、まったく別のおはなしでございます。

そんなこんなで前回前々回に引き続き、SharePointのUIを洒落乙で良い感じにあーだこーだしましょう、という前途多難艱、難辛苦待ち受ける道程を駄々流しにする流れです。

mission:SharePointを装飾せよ。

そうそう。ミッション開始にあたり、ヒントを貰っておりました。
・CSSファイル
・webパーツ
・「組み込みスクリプト」

いつものごとくちんぷんかんぷん☆いえーい。

ちんぷんかんぷんなことはぐーぐる先生、という回路はすでに確立されているのですが難敵、強敵。意味不明。おぼろげながら輪郭を理解する過程に二日ほど掛かりました。そんな過程は開陳してもおもしろくないので、割愛。一体何度毒づいたか、一体何度わかんねえよ!!!となったのか、そこはお察しください。お察しした上であきらめなかったわたしを褒めてください。

そんなこんな、七転八倒の末辿り着いたCSSに対する理解、こんな感じ。
Cascading Style Sheetの略。サイトの骨格標本がHTML、そこに内臓だの筋肉だの皮膚だのがはっついて身体が生成される。CSSは装飾全般。羽毛で覆われてるとか、肌の色とか、お洋服とか、なんなら刺青とか。見栄えを指定するためのツール。ひとまとめにしといても良いけど、別個管理の方が楽ちん。

…あ、あれだ。T・レックス、あいつら羽あるとか皮膚の色は想像だとか言うじゃん?あれだよ、あれ。うん。化石がHTMLで、今のところ謎っぽい部分はCSSだと思えばどうにか、理解できなくもない。別にしといたCSSファイルが見当たらないんじゃ、そりゃ見栄えは推測にしかならんねーとかなんとか。

理解の正確さは完全に、お空の彼方に投げてます。サラバ。
SharePointをちょっと飾るだけならこの理解で、たぶんおっけー。(駄目だったらあとで叱られる筈、そしたら訂正しよう。そうしよう。)

さて。

諸々巻いていきます。

ググってググってググった結果、どうやらSharePointはCSSで装飾できるらしいことは判明。そのやり方も簡単で、代替CSSを利用するだけ、とのこと。CSSファイルをドキュメントフォルダにアップロードして参照すればオッケー☆だそうです。

え?

????

あのね、…うん。

うん。

恒例だけどね、わっかんねえぞちくしょう!!!!!

ほんっと初心者に優しくないインターネット!!!!!きらい!!!

まずもってCSSの書き方もよくわかんない(ソースっぽいものは落ちてるけど、それをどうやって適用したらいいのかわからない)、どこにどんなファイルをアップロードしたらいいのか、何をしたらいいのか、ちっとも、さっぱり、微塵も、わからん。
あーほんと無理ほんとやだ、不親切だーなどとやさぐれながら死んだ魚のごとき瞳で膨大なる検索結果(ほぼ理解できずに徒労)を眺めているときに出会ったのがこちらの動画。

動画じゃいやだってひとは、文章版もあります。こちら。
Modify the SharePoint Branding Area using CSS ―A SharePoint tutorial by Peter Kalmstrom

Webパーツじゃないけど、色変えたりしてるじゃーん。しかも手順全部見られる、わかりやすい。あ、なるほど、CSSってこんな風に書けばいいのか。代替CSSってそれのことか。アップロードと参照ってそーゆーことね。PowerShellつかってる!!こないだ見たやつだそれ、ISEだ!!!(やってる操作は七割くらい理解できなかった)。おおまかに、なるほどなるほど、なるほど。

見ず知らずのおっさん、インテリ眼鏡ぴーたーのおかげです。わたくしの死んだ目に光が戻りました。

次回、これらを踏まえてWebパーツの改造編に突入致しますので、ほんじつは、お疲れさまでした。おしまい。

SharePoint Color Palette Toolで遊ぶ #2

有言実行、連続更新。れっつシェアポイントの改造。カラーパレットツールで遊ぶ第二弾。わたし偉くない?ちょう、えらくない??などと思いながら無表情でキーボードをたたいております。

前回:SharePoint Color Palette Toolで遊ぶ #1
どこまで進んだっけ。遅々とした歩みすぎてなんかもう、はやく進め、と内心思わなくもないですがでも、でもまあ、初心者だし☆ってことでマイペースに。押さず、焦らず、走らず、ときどき休んでぼんやりしたり後退したり。進むのが厭になるよりよっぽどいいじゃない!と、開き直っているので大丈夫です。……大丈夫か?(会社的に)

毎度の無駄口、無駄文字を経て、前回の続きです。背景入れられたよー!やったね!てところまで終わったので、喜びが水泡に帰す前に、そう、わたくしがすべきことは保存です。

colorpalette18

緑色が目に優しくなかったので、ちょっと変えました。ついでにレイアウトもoslo→seattleへ。気分の問題です。たいてい、気分。左上<File>から保存。えい。(ファイルの種類は.spcolorのまま。デフォルトで出てくるそれっぽいやつから変更しなけりゃ問題ないです。)

colorpalette10

保存してこの画面が出てきたら、成功。ぱちぱちぱち。おめでとうございます。………さて。次だ。移動だるーっての学生時代よく言ってたなー…教室移動も、遠足も、修学旅行もだるいだるーいテンションでだらだら動いていました。あとよくサボタージュかましてた。なんてことはほんとうに、どうっでもいいので。

SharePointサイトに移動しますよ。れっつごー。

右上歯車からサイトの設定に飛びます。(トップレベルのサイト設定から設定せにゃならんので、もし必要なら移動。サイトコレクションの管理、という項目にちゃんと「トップレベルのサイトの設定に移動」という項目があります、わー親切。親切。)

この画面の、<Web デザイナーギャラリー>内、「テーマ」に移動。

colorpalette11

中に、「15」ってフォルダが存在するのでそこに、さっきつくったファイルをアップロードします。うっかり、一緒に、背景で使った画像もアップしてみました。

colorpalette12

サイトの設定に戻る。戻って、次も<Web デザイナーギャラリー>の中、今度は「構成済みの外観」へ。わけわからんものがずらずらずらと並んでいます。このわけのわからんもんが、いわゆる、テンプレート的なものです。SharePointのサイトの見た目はテンプレートでも変えられるんですね、と今更。いまさら!

colorpalette13

なんでまあ、テンプレ追加。新しいアイテムとして追加。タイトルも名前もなんでもいいです。マスターページのURL???ってなったのでとりあえず、さっきずらずら並んでいたリストからコピペ。あとから気づいた、え、あーなるほど?って事柄がひとつ。マスターページの末尾、osloとseattleと二種類あるんですけどこれあれだね、さっき選んだレイアウトだね。てことでたぶん、そんな感じなんだと推測します。正確なところは謎。

colorpalette14

テーマのURLは、「テーマ」にアップロードしたファイルのURLです。これも基本ファイル名だけ変えりゃコピペでおっけー。イメージのURL、これは背景画像のことなので、さっきうっかりアップロードした背景画像のURLを指定。

さあ、保存。…今日、保存してばっかだなーなどとぼやきつつ、三度目のサイトの設定。<外観>の中から「外観の変更」、そこに並ぶテンプレートっぽいやつらの中にさっき作ったデザインがいたら成功です。いなかったら、たぶん、何かしら間違ってます。
わたしは、ファイルのアップロード場所を間違えたり(たぶん)、テーマのURLを間違えたり、マスターページのURLを間違えたり、あと何が間違ってるかわかんない間違いを犯したり、したり、して、五回くらいやり直した…いないじゃん!まじなんなの!どこだよばーか!!!って五回やったあとに、出てくるとそりゃあうれしいものなのですよ。わー!!!会えた!ってなります。(でも疲れるから一回で成功した方がうれしい。)

そんなこんなで熱烈な出会いを果たせたテンプレさまを選択。

colorpalette15

プレビューを押して。

colorpalette16

確定して。

colorpalette17

…おー、反映されてる。されている。そうしてこの作業やりながらちょっとやるせないことに気付いたんですけども。

最初からこの「外観の変更」で充分じゃあない…?

色を選ぶ手間がないのと、すごく細かく色指定できること以外でカラーパレットツールを使うメリット…なんだろう…手元にファイル残るけどそういうこと…???

まあ、まあ。うん。あんまり考えすぎると虚しくなるので、いいや。いいや。ちょっとSharePointの内側に詳しくなれたので、よしとしましょう。学んだ!覚えた!前進した!よかったじゃん!以上!!

SharePoint Color Palette Toolで遊ぶ #1

天高く馬肥ゆる秋、わーい九月だ九月、秋だ!美食だ!酒だ!サラバ夏!!!(暑いのきらい、だいっきらい)などと浮かれていたところ見事ゲリラ的な夕立に降られてしたうちみっつ。気温も夏に戻ってるし、なんなんですかね、温暖化ですか、はやく冬になればいいのに。あ、でも驟雨って言葉だけはすき。驟雨。ざあざあと降る雨とアスファルトのにおい、大嫌いな夏の中で数少ない好意を持てる現象です。ノスタルジーとメランコリー、おとなになると懐かしむことが増えてゆく。まあ、どうでもいいはなしはさておいて。ええと。なんだっけ。低気圧がしんどいって話ではなく。

mission:SharePointを改造しましょう

そうそう、先日わたくし、こんなミッションを授けられたのでした。れっつ魔改造。目指すは絡繰り忍者屋敷。なあんてできる筈もないのでとりあえず見た目から変えてみましょう、と。お部屋のリフォームと一緒です。まずは、わかりやすいところから取りかかるのが肝要。わけわかんない作業とか飽きるし。素人が手を出したらまずい個所いっぱいあるし。電気系統やら水道関連。あれは、おそろしい。

ほらまた脱線。モドル。

SharePoint Color Palette Toolという便利なものが世の中には存在するそうです。
すてきツールを使うとSharePointの外観の(色)変更が容易にできるとか、なんとか。カラーパレットツールなので、デザイン変更まではできません。それでもほら、色ってね、相当印象左右しますからね。

英語版しかないので、公式サイトかられっつダウンロード。
”Supported Operating System/Windows 7, Windows 8/Internet Explorer 8 or higher/.NET Framework 4.5”とのこと。Windows 10には対応してない…ないのか。動かないのかな。ちょっとわかんないです。わたしのぱそこんは現在Windows 8.1らしいですがふつうに動いた。

colorpalette01

開いた。当然のように英語ですがなんとなーく、わかる気がしてぽちぽち触る。えい。

colorpalette02

おおー!!!

colorpalette03

<Recolor>の左側にある□が基本になる色。

colorpalette04

そこを押すとColor Pickerなる小さいウィンドウが出てきます。これで色指定。れっつごー。RGBとHSVの数値指定(opacityは透明度)、もしくは上にあるグラデーションから選択。左側が現在の色、右側が選んだ色。ちいさいペンのマークはEye Dropperというやつらしいです、デスクトップ上の好きな部分の色を持ってこられる。

colorpalette05

こんな感じ。かーらーの。<Recolor>ボタン。

colorpalette06

クリックひとつで色組までやってくれるよ!色彩感覚なくても問題ないよ!
左側の項目がずるずる長くて邪魔、ってひとはグループ化させて表示しましょう。色コード表示されている枠の上<Group by>から変更できます。

colorpalette07

右上の四角いところから背景画像も貼れます。<change>から、えい。えいえい。

colorpalette08]

そんなこんなで好きに色と背景を変えたら、あとは簡単…な訳なかったね!この先ちょっと苦労するよ!説明文ではおおよそ4行だったけど実際やってみたら30分は余裕で超えたよ!!

ということで一記事にまとめるのは諦めました。続きは明日か明後日にでも。おつかれさまでした。(おもにわたしが)

Microsoft Office Division Demos #2

Microsoft Office Division =MOD、なのでMicrosoft Office Divisoin DemosはMOD Demosと略され文中ではMicrosoft Office Demosという単語も現れる(ねえ、divisionどこ行った?)。
ということがあたまの中に定着するまで三日を要しました。英語にゃ疎い日本人、頭文字つなげるのやめてくれないかなーといつだって思っています。こんがらがる。意味がとれない記号を覚えるの、とてもとても苦手。

そんなこんなで第二回目。デモサイトの構築は問題なくできたという前提です。つくったところで…え?で、どうすんの?作成されたデモサイト、どうやって入んの?みたいなね。なりませんか。そうですか。わたしはなりました。

MODdemos01

ということで画面上部のメニューから「RESOURCES」を選択。無難にいちばん上のOffice365から見てゆくのがよいのではなかろうか。「Enterprise Hero Demo」…あー、なんかうん、最初のページで言ってた気がする、見掛けた気がする。

”Microsoft Office Demos focus on a small set of “Hero” personas which are used to walk through the demo steps with minimal changes of user context.”

仮想人格たちのことね、なるほどね。ならきっと、ここにゃ前回の構築画面でずらずら並んでたひとたちをいかに使うか、みたいなことが書いてあるのねきっと。たぶん。予想として。

MODdemos02

文章読むの嫌なひとは(たぶん)動画を観たらわかりやすいです、一時間ちょっとあるし英語なのでわたしは途中で放棄しました。ねむくなるやつでした。なので説明書読みます。

MODdemos03

動画のすぐ下ね、「Download the Enterprise Hero Demo Guide 」から、説明書がダウンロードできます。”Essential information for Office 365 Hero Demo setup and usage”、つまり、まあ、とりあえずこいつ読んでおけばOffice 365 Hero Demoのセットアップと使い方の重要なところは理解できる…筈。

どーん。

MODdemos04

45分ほどで一通りの理解には至れるらしい。動画が一時間なので15分の短縮。余った時間で何かしらできます。何ができるかなー…15分。ああ、煙草が二本吸えますね。うれしい。

MODdemos05

目次はざっとこんな感じです。デモの内容とセットアップの方法、各機能の説明。

【Demo Outline】には<PowerMAPの良さがちゃんと知りたいなら13インチ以上あるPPIディスプレイだとよいと思うよ。あとPower Map で結構大きなデータ扱うから、64bit版のExcel 2013で。PCのRAMは4GB以上欲しいなー。>とか。
ケイティー・ジョーダンってお姉さんは「Contoso」って会社のセールス部門で働いてて、この会社、「Northwind Traders」みたいないろんな会社を配下に置いてる。このデモ通じて、Microsoft製品がケイティと彼女の会社に対してどれだけ有用かわかってね。>みたいなことが書いてあります。各ソフトの機能は各々見てください。(丸投げ)

つぎ、【Setup Requirements】に必要なものや手順が書いてあります。
Office 365 のデモテナント(デモサイト)用意してね、てのはすでに終わっているのでスルー。その次に書いてあるのは、デモ環境にログインするためのユーザーネームとパスワードです。これ、重要。とても重要なやつ。下の画像の上半分くらいに載ってるやつらです。覚えといてね。

MODdemos07

画像見たついで、視線はそのまま、赤枠の中に「Client Setup Tool」てのが見えますか。みえますか??見えないひとはこころの目で見てください、クライアントセットアップツール、と書いてあります。このひと、なかなかに便利。確かに便利。お願いするといろいろ勝手にやってくれます。ですが、説明すると長くなるので割愛。したいところではありますが、たぶん次回あたりに細かく見てゆくつもりです。おべんきょ兼ねてね。予定は未定だけれどね。

今日はここまで。おつかれさまでした。

素朴な疑問を解消してみる(ぱわーなんちゃら@MSを探せ)

マイクロソフトのパワーなんちゃら、いったいどれだけいるのかしらん。なんて疑問がふと過ったので調べてみました。

・PowerBI
・PowerShell
・PowerPoint
このみっつは知っている。知っているぞ!!!(どやがおしたい)

初心者の基本その1。ググる。

powers01

グーグルせんせーの、この関連する検索キーワード、地味に便利で好き。得体の知れないものを調べるときによくお世話になっております。時々無間地獄か永久機関か、みたいなことになるけれど。

…Power Toys??

「マイクロソフトは、Windows 95の登場以来、主に上級ユーザーを対象として、通常では行えないWindowsの各種設定や、便利なツール群をまとめた「PowerToys」と呼ばれるツール集をインターネット上で無償公開している。ただし、正式な日本語版は提供されておらず、サポートもない」

ふうん。

もっかいググる。

powers02
「……Excel の Power BI アドイン「Power Map」のマップ化したデータの3D 視覚化機能、そして「Power Query」のデータ検索機能がそれぞれ強化され…」

Beginning Power BI with Excel 2013: Self-Service Business Intelligence Using Power Pivot, Power View, Power Query, and Power Map

んー…?んんんー?
なんとなく雰囲気から察するに、Power BIはPower Query/ Power Pivot/ Power View/Power Map(+そのほか何かしらの機能)の総称…?え、それぞれまだググるの…は、あとでいいや。Power BIと仲良くなる過程でどうせ個別突破せにゃならんだろ、明日できることは今日しない!

よし次。

マイクロソフト パワーカバー
”パワー カバーはタイプ カバーと同様の動くキーを使用しており、Surface のバッテリーが長持ちします。”

へえ。ふうん。キーボードの亜種だなおまえ。よしわかった。次。

マイクロソフトさまご提供の用語集(マイクロソフトランゲージポータル)で検索とかしてみました。

「Power ballad」
One of the music genres that appears under Genre classification in Windows Media Player library.Based on ID3 standard tagging format for MP3 audio files. Winamp genre ID # 117.”

あ、これあれだわかんない単語ググっても延々わかんないが続くやつだ、しかもたぶんそんなに重要でない!(雰囲気)

他にもPowerWedgeとかPowertoolとか出てきたけどどれもそんな重要ではない気配なのでまあ、いいや。まあ、いっか。よし。

たぶん。たぶん、おそらく、ですけれど。
ふっつーにぱそこんつかえるひと(あたまよわそうな呼称だなこれ)から見たらものっそい非効率的な調べ方してるんだろうなーと思うわけです。こうすりゃいいじゃん、みたいなことをかるーく言ってくださるわけです。
あいてぃーしょしんしゃ甘く見んな何がわかんないかすらわかんないんだからな!!!!!

ほんじつのまとめ:マイクロソフトのパワーなんちゃらは、BI(とその配下)とPointとShellたちだけ覚えとけばどうにかなりそうなので、調べたことは書き残して七割忘れてよいです。だいじょうぶです。

パワーマックってなかったっけ?と思ってググってみたら、マイクロソフトではなくアップル製品でした。図らずも無知の露呈に成功したところで、おしまい。

(とおもったらすてきな資料をいただいたのでちょっとだけ続きます。いずれそのうち)