宗教法人まいくろ―SharePoint改造計画 テンプレート編#0

CSSと格闘してみたり、カラーパレット使ってみたりなんだかわちゃわちゃしているSharePoint改造計画。今回は、ちょっと趣向を変えて…別に変わってないので言ってみたかっただけです、まあまあ気にせずテンプレート編に突入です。れっつごー。どうでもいいけど今回タイトルが無駄に長々しいな、もっと短くしたいな。

テンプレート編とはいえ、書いているのはいつものひよっこ。当然のようにググったりググったりググったり、途中眠気に襲われたりしてのんびり進めておりました。テンプレートは自作できるのね。ふむ。コンテンツの中身でもサポートされてるものと、されてないものがあるのね。ふむふむ。テンプレートの上限は50MBなのね。ふむふむふむ。なんて具合に。そんなときに。

公共・医療・教育機関向け総合ポータル

この中でね、公式テンプレートが配布されているらしいと風の噂を小耳にはさみ、訪れてみました。

結果。

template03

ん?

…んん???

宗教法人。

template04

template05

<宗教法人 まいくろ>

…これ、ばくしょうしないひといるのかしらん。(素朴な疑問)
だって宗教法人ですよ。しかも、お名前が「まいくろ」ですよ。ちょっとなんかもう笑っちゃうじゃん?まいくろそふとさま、ビルゲイツは預言者ですかそれとも神ですか。

見つけたからにはやってみようということで、早速、デモテナントで試してみます。わあーこれで夢の宗教法人ごっこができる。教祖様ごっこができる!我に額付け跪け、足を舐めろ崇め奉りやがれ。

よし。まずは公式サイトからテンプレートをダウンロード。
template02

zipで配布されてるので解凍して、適当に保存。中にマニュアルくっついてます。このブログよりたぶんはるかにわかりやすい(このわたしが、一発で…二度ほどアップロードするファイル間違えたの忘れてた。ほぼ一発くらいで、成功したほど丁寧)ので手順はそちらをご覧あれ。

三分クッキングの要領で、あれをそれして、これして、はい。どーん。
template01

てれってれー。しゅーきょーほーじん!!!(テンションあがる)

しかも小ネタにいちいちクスクスできます。
template06

しばらく一人遊びの場には困らなそうです。ありがたや、ありがたや。まいくろさまのおかげです。ありがたや。よし、おつかれさまでした。

広告

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分は余裕で超えたよ!!

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