Quiz And Survey Master(QSM)を使ってみることにした

ブログでなんか面白いことやれないものかな？

……ということを考えまして、だったらクイズ的なもの？　はどうだろうと安直に考えてみました。

とはいえ、この方向性がよくわからないサイトではいい感じのコンセプトが思い浮かばなかったんですが、私のもう一つのサイトセイレネス・ロンド統合サイトだったら、作品にまつわるライト～ヘヴィなクイズ作れるよな、とか。

それでググって発見QMS

クオリティ・マネジメント・システム（QMS）みたいで嫌な感じの略称ですが、「Quiz And Survey Master」で通称QSMとのこと。簡単に言うと、クイズやアンケートなど、とにかく「質問」に対して「回答」するようなものはたいてい何でも作れますというような。オーソドックスな４択問題はもちろん、入力問題も作れます。

ただし、問題作って回答設定して……というところが若干めんどくさい。SQL流し込みとかできんものかな～。

WordPressへの導入方法＆クイズ作成

導入方法

• おなじみ「プラグイン」で「Quiz And Survey Master」を検索してインストール＆有効化
  まぁ、ここまでは問題ないでしょう。

クイズのベース部分作成

• 左のメニューに「QSM」というものが出現するのでクリック（Dashboardが開きます）
• 「Create New Quiz/Survey」ボタンをクリック

• 右下の「NEXT」をクリック
• 私はこんなふうに設定。Graded SystemをBothにしてるのは趣味です。

• 右下の「NEXT」をクリック
• 右下の「Create Quiz」をクリック
• 左のメニュー「QSM」の「Quizzes/Surveys]をクリック

クイズの問題と答え作成（四択式の場合）

1. 今作ったクイズタイトルにカーソルを当てて「Edit」をクリック
2. 「Type your question here」と書いてある所に「問題」を入力します
3. 画面右にあるQuestion Typeを「Vertical Multiple Choice」にします
4. 回答の選択肢を入力します。「Add New Answer」ボタンで選択肢を増やせます
5. 正解となる選択肢の「Correct」にチェックを入れます。ポイントも入れます。10とか。
6. 「Save Question」ボタンを押します（忘れがち）
7. 画面右下にある「Create New Question」を押して次の問題を作成します
8. 問題がズラッと並んだらその他諸々の設定をします（後述）

クイズの問題と答え作成（自由入力の場合）

基本的には４択式と同じですが、以下が違います。

• 「Question Type」を「Short Answer」にする
• Answers のところに「正解」となるテキストを入力します。ポイントも必要に応じて。
• ↑の「Correct」にチェックを入れます。
• 「Save Question」を忘れずに！
• まとめるとこんな↓感じになります。これで問題に「呵責」と表示され、解答欄が「自由入力」になり、正解が「かしゃく」として設定されます。くれぐれも「Save Question」忘れずに。というか、なにかしたらSaveするようにしましょう。

色々調整

「Style」タブは要らない子です、多分。

クイズトップ画面

「Text」タブを選び、こんなふうに。「%QUIZ_NAME%」はあったほうが良いですが、ほかはお好みで。書式的なものはWordPressそのものです。

OPTIONS

「Options」タブ。
完全に私の好みの設定ですが、こんな感じ。

• Grading System: Both
• Show Progress Bar: Yes
• Require User Login: No
• Questions Per Page: 5
• Random Questions: （問題による）
• Show Current page number: Yes

ほかも適当にやってはプレビューする感じで。

メール通知

「Emails」タブですが、回答メールの通知がほしいならともかく、そうでない場合は削除でいいです。2つ出てると思いますが、どっちもRemoveしちゃいましょう。

回答結果（Result画面の設定）

「Results Pages」タブ。

• ここがちょっとテクニカルですが、「左枠でスコアの条件」「右枠でなんて出力するか」を設定します。ここで便利なのが「%POINT_SCORE%」と「%QUESTIONS_ANSWERS%」です。図にならって入れてみて、適当にカスタマイズしてみましょう。
• たとえば、満点だった場合、全問正解！　と出力したい場合などはこうします。
• 私が使っている結果出力分岐はこんな感じです。もしかしたら冗長かもしれないですが、動作はします。

ここまでできたら「プレビュー」！

というわけで、この辺のボタンをクリックしてプレビューしてください

自分で回答してみると、設問・回答設定ミスを防ぐことができるので、必ずチェックしましょう。またResultsの出力結果も確認してください。

wordpressの記事に配置する作業

• 左メニューの「QSM」→「Quizzes/Surveys」→ 「今作ったクイズの『Shortcode』のアイコン」をクリック（↓図の赤枠）

• [qsm quiz=5]のようなものが表示されるのでコピー
• WordPress 左メニューの「投稿」から記事を新規で作ります。
• 記事の任意の場所に、[qsm quiz=5]のようなコードをペースト
• あとは適当に料理します

これでクイズ設置完了

作ったクイズはこんな感じ。

試験問題を集めたページ - セイレネス・ロンド / 統合情報サイト

少しずつ増やしていく予定。 「静心にて、花の散るらむ」クイズ 初級編 静心クイズ【初級・１】（2021/07/

seirenesrondo.xyz

ぜひぜひ。

The post 「Quiz And Survey Master」でクイズを作ってみる first appeared on 文章で生きていく.

VSCodeだけで、あなたの物語の「設定資料集」を作れちゃいます。

VSCodeってのは（超すごい）テキストエディタのことです。やりたいことはたいていできます。ただの「メモ帳」とはわけが違うんですね、これが。なんでもできます、まじで。

で、小説書きやってきた私は、「小説書きには最適なツールだ」と思っているソフトでもあります。なので、そんなソフトが小説書きにとってどれほど役に立つのかを日々考えている次第。

というわけで、今回は「人物相関図」をテキストエディタで作る――ための環境を作ってみましょうということです。いろんなソフトを開かなきゃならないというのはワタシ的にはかなり苦痛。なので、人物相関図だろうがなんだろうが、すべてこの「VSCode」で統合できないものかな！　と。

VSCodeでフローチャート

さて、先日よりVSCode推しの記事を書いている私ですが、今日は「フローチャート」をVSCode上で書いてみるチャレンジをしてみますよ。実はVSCodeでフローチャートを書く方法は、大きく分けて2種類あります。CUIとGUIです。さて、ここでCUI、GUIと言われて「？？？？」となった方。そう、あなた。あなたです。アナタのためにこの記事を書きました。

ちなみにCUIというのは「文字だけでなんとかする」インターフェイスで、GUIというのは「画像的な感じも使ってなんとかする」インターフェイスのことです。プログラマな感じの人ならCUIのほうが楽だと思います。そういう人はVSCode突っ込んだら「VSCode Mermaid」って検索すればいいと思うよ。うん、そういう人はこれだけでググれると思うので割愛。ちなみに個人的にはCUIなMermaidのほうが使いやすいです。

さて、世の中のほとんどの人はCUIだと敷居が高い、難しい、どうしたらいいかわからない……だと思うので、ここでは「画像的にポチポチクリックとドラッグとしてたらなんか知らんがフローチャートができていた（＝GUIを使ったケース）」っていうようになるお話をしますね。

フローチャートって何に使うねん？

はい、そういう質問、ありますね。フローチャートなんてまず自分で作らないと思います。そもそも「流れ（フロー）」ですからね。製品開発やプログラムの処理についてなどを書くのが基本用途です。一般生活ではまず使いません。フローチャートは。

が、まぁ、ほら。「登場人物の相関図」とかで矢印引いたりなんだりしません？　あれですよ。ワードとかエクセルとかパワーポイントでももちろんできます。が、やつらはダメだ。クッソ重たいし融通効かないし、ちょっと修正しようとしたら大惨事ですよ。あと、作成途中でソフトが死ぬことがありますね、奴らは。バツっと落ちたりフリーズしたり。その後のリカバリにも時間かかるし（なかなか立ち上がらないとか）。奴らにも復旧機能はあるけど、復旧機能をちゃんと使える人ならそもそもMS Office系で（仕事以外では）作図はしないと思う。Office嫌い！←仕事でもOfficeは極力回避する人

そんな中に燦然と現れたのが、この「Draw.io Integration」です。いや、前からあったけどさ。

Draw.io Integration とは

この「Draw.io Integration」こそ、「見た感じで適当になんかしてたらフローチャートができてしまった」を実体験できるプラグインです。ちなみに保存はテキストファイルと同様です。必要に応じて画像形式で出力（エクスポート）できますが、その際に.png（一般的な画像）の他に.svgも選択できます。SVG、その筋の人じゃないと知らないと思いますが、縮小拡大しても劣化しない画像と思ってもらえれば。あと、SVG形式で出力できるということは、たとえばHTMLに埋め込んでjavascriptなりなんなりでその画像を動かしたりもできるということでもあります。クッソめんどくさいけど、多分jQueryとか使えばそこそこ簡単じゃないかな？　知らんけど。とにかく発想力と技術次第で何でもできるのが、このVSCodeとプラグインたちなんです。

でもま、「ぽちぽち素材を置いていって、いい感じになったら画像（.png）に出力できる」くらい理解していれば十分です。

Draw.io プラグイン導入方法

さて、導入です。

めっちゃ簡単。VSCodeは入れたいプラグイン名さえわかっていればほとんど秒殺で導入できます。ググれば99％幸せになれる。今回のこのプラグインも、面倒な設定はないので一瞬です。

1. Visual Studio Code を入手する

• まず「VSCode」をゲットしてください。無料です。
• https://azure.microsoft.com/ja-jp/products/visual-studio-code/

1. VSCodeをインストールします
2. VSCodeを開きます
3. 開いたら、左のテトリスみたいなのをクリックする（図1）
4. 上にある検索窓に「Draw.io Integration」と入力する（図2）
5. 一番上に「Draw.io Integration」ってまんまのやつが出てくるので「インストール」
6. 終了（念の為VSCode立ち上げ直すと良いかも）

どうやったら編集モードに入れる？

• 拡張子が大事です。

1. VSCodeを立ち上げます
2. メニューの「ファイル」→「新規ファイル」を選択します
3. 「Untitled-1」というタブが開くのを確認します
4. そのまま「ファイル」→「名前を付けて保存」を選択します
5. 自分で分かる場所に保存しますが、ファイル名を「test.dio」としてください。dioが大事。.txtとかではこのプラグインは動作しません。
6. タブ名が「test.dio」に変わったら一度「タブ」を閉じます（VSCodeを閉じる必要はないです）
7. 「ファイル」→「ファイルを開く」→「test.dio」で開き直します。
   • 「ファイル」→「最近使用した項目を開く」の中から開いても良いです。
8. フローチャートを書くための画面が立ち上がります

どうやって編集する？

• 事細かに書いてみようかと思ったんですが、そもそもGUIって「直感的に使えるもんじゃね？」と思っている私です。実際にこのGUIはなかなか優秀で、適当にポチポチしてても描けちゃったりしました。これ（図3）を書くのに所要した時間は（初見で）10分くらい。
• 見て分かると思いますが、「Import」をすると画像を入れることもできます。
• とりあえず適当に諸々置いたら、いちおう保存しておいてください

画像に変換したい

1. 「test.dio」タブの中にある「ファイル」をクリックします
2. 「Export」を選択します
3. すると画面上部中央に下の図のような表示が出るので「.png～」を選択します
4. 後は通常通り出力するファイル名を設定して保存します

• こうなったら後はもうただの画像なのでお好きにどうぞ。
• 修正するのも再びこの「test.dio」を開いていじくるだけです。

さぁこれで、クソなOfficeを使う必然も、画像編集ソフトでレイヤがどうので四苦八苦することもなくなります。オマケにテキスト含めて全てVSCodeで管理できるすばらしさ。クリエイター諸氏、是非体験してみてくださいませ。

こちらの記事もどうぞ。

「小説執筆」、何を使っていますか？

というわけで、私が小説執筆時に使っていた＆今もブログやら仕事やらでフル活用しているエディタについて紹介しますよ。生涯で最も長時間触っているエディタだと思う。 Visual Studio Code ブログでも小説でもそうなんですが、私は「文章...

ken1shiki.xyz

2021/07/13 11:52pm

ワードプレス更新作業の強い味方、マークダウンエディタ！

スマホでマークダウン ワードプレス更新の際には、基本的にはパソコンにて「VIsual Studio Code」にプラグイン「Markdown All in One」突っ込んでの作業になるんですが、スマホでも効率よく作業できないものかなという...

ken1shiki.xyz

2021/07/15 12:40pm

マークダウンとこのフローチャート（しかも画像取り込みも可能）のやつを使えれば、あとはVSCodeの標準機能だけでも死ぬほど便利で使い勝手の良い環境になると思うなぁ。

The post VSCodeでフローチャート（を使った人物相関図）を直感的に書く方法 first appeared on 文章で生きていく.

スマホでマークダウン

ワードプレス更新の際には、基本的にはパソコンにて「VIsual Studio Code」にプラグイン「Markdown All in One」突っ込んでの作業になるんですが、スマホでも効率よく作業できないものかなということで、ちらっとGoogleさんで探してみました。

ちなみにVisual Studioの話はこちら↓の記事で。

「小説執筆」、何を使っていますか？

というわけで、私が小説執筆時に使っていた＆今もブログやら仕事やらでフル活用しているエディタについて紹介しますよ。生涯で最も長時間触っているエディタだと思う。 Visual Studio Code ブログでも小説でもそうなんですが、私は「文章...

ken1shiki.xyz

2021/07/13 11:52pm

Marker: Markdown Editor

評判がよさげだったので、↑を入れてみました。Visual Studio Code系列は評判がひどかったのでスルー(笑)　レビューとかそういうのは足切りに使うのに便利。もしかすると自分にフィットするかもしれないですが、それを検証する時間が惜しい。この辺、小説サイトでも同じかもね。と、無理矢理（元）小説書きっぽいことを言ってみる。私、一応カクヨム民ですよ。

マークダウンエディタを使うメリット

ワードプレスの編集画面って、重くないですか？　だかだかっと打ち込む私のようなタイプだと、あのもっさり感は耐えがたいんです。

カテゴリー設定とかアイキャッチとかタグのところはいいとして、本文重いのは許せないし時間がもったいない。考えも途切れてしまうし。だから一瞬たりとも入力遅延はしてほしくない。文字書きしていて一番苛立つのは、打鍵に画面が追い付いてこないときです。

マークダウンエディタは軽い

だからこそのスピード感。「マークダウンエディタ」っていうのは、簡単に言うと「超強いメモ帳」。なので、重さという点ではほとんどメモ帳。というか、下手すりゃメモ帳より軽い。とにかく「重さ」でストレス感じません。

整形がほとんどオート

これすごく重要で、たとえば↑の見出しのところはエディタでは「### 整形がほとんどオート」って書いてあります。たったそれだけで「H3」の見出しになります。これをまんまワードプレスに（プレーンテキストで）貼り付けするだけで、ちゃんとその形になって表示されるのです。

構成管理がとにかく楽

最初に見出しをがしがしつくっておいて、そこに文章を盛っていってひとつの記事に。これ、メモ帳でもできるんですが、マークダウンエディタを使うと同時並行的に見映えを確認できる。メモ帳にはできませんし、ワードプレス直書きは前述の通り「重たい」のでおすすめしません。

他のマークダウンエディタでも同じルール

マークダウン記法はエディタ依存じゃありません。なので、エディタ間での互換性があります。なのでエディタごとのルールを覚える必要はないです。

さらに、この「Marker」というエディタ、ショートカットメニューボタンがすばらしい。全く説明なしでも使えるレベル。見出し、太字、表作成などなどがボタンひとつで設定できちゃいます。もちろん、手でさくさく設定することもできます。私はもっぱら手打ちですが、表作成とかはショートカットの方が圧倒的に楽。というように、自由に使い分けできます。

PDF出力ができる！

ごく普通にPDF化できちゃいます。末尾にその一部を載せときます。

ワードプレスの更新！

この記事も「Marker」で書いたものをそのままコピペして作っています。めちゃめちゃ楽。見出しとかそのまま入ってくれるのがたまりません。

パソコンならVisual Studio Code 一択かなぁと思いますが、スマホならこっちの「Marker」がいいかも。Dropboxから直接開いて編集……のようなクラウド連携ができないのはちょっとマイナスですが、どっちみちワードプレスにて保存するわけですし。何万文字とかにならないなら、スマホ保存で十分じゃないですかね？

スマホからワードプレス更新する方、まじでマークダウンエディタはおすすめでございますよ。

ちなみにこの記事をそのまま単純にpdfに出力すると、↓のようになります。

こんなふうに。

マークダウンは本当に便利なので、まずは挑戦してみてはどうでしょうか！

The post ワードプレス更新作業の強い味方、マークダウンエディタ！ first appeared on 文章で生きていく.

Visual Studio Code

ブログでも小説でもそうなんですが、私は「文章を書く」際に使うソフトは「Visual Studio Code」一択です。何しろ、保存しなくていい。保存したければもちろん保存できるんですが、保存しなくても自動的にこっそり保存してくれる。Visual Studio Code（以下VSCode）がもし仮に落ちたとしても、次に立ち上げた時にはちゃんと前回書いたところまで残っている。すげぇやつです。それだけでも圧倒的に執筆にいいんですが、こいつ、もっとすげぇ機能が色々あるんです。追加できる機能を含め、そのスペックは鬼のように凄まじいので、今回は小説執筆に限ってお話をしていきますよ。あ、ちなみにVSCodeは無料です。

VSCodeはこちらからダウンロードできます。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

自動保存機能

前述の通り、「自動的に保存してくれる」という。昨今のエディタでは珍しくはない機能ですが、仮にファイルを作っていなくても保存してくれるという点ではやっぱりすごい便利。（2022/11/14追記→）ただし以下の設定が必要です（外部サイト）

エディターの自動保存の設定

Visual Studio Code でエディターの自動保存に関する設定を行う方法について解説します。

www.javadrive.jp

便利。私も小説書く時にはこのVSCodeなしではやっていられませんでしたね。昔はEvernote使っていたんですが。それにほら、よく「保存忘れて●千文字消えた」なんて聞きますよね。私としてはなんで自動保存エディタ使わないんだろとか思うんですが。まぁ、そんな嘆きもこのVSCodeをぶち込めば解決です。それにVSCodeはなによりタブエディタなのでいくつものファイルを同時に開いておけるんですよね。しかし、それだけではないのです。

タブエディタ

↑で言いましたが、タブなんです、タブ。画像にある通りタブ。これ、メモリが許す限り開けるんじゃないかな、知らんけど。

しかも同じファイルを画面分割で見られたりするんです。これはあんまり小説では使わないかもしれないんですが、プログラマやってたりすると意外と使う。それにあれですね、タブですから、「設定資料」とかを常に開きっぱなしにできるのは便利。たとえば右画面に設定、左画面に本文とかできるし、3画面分割とかすれば登場人物も置いておける。とても便利。だがしかし、VSCodeのやばいところはこれだけじゃない。

フォルダ管理ができる

フォルダごと開く！

そう、フォルダです。フォルダをまるごと読み込んで置いておけるんです。どういうことかわかりにくいかもしれないんですが、どんなアプリケーションにも【ファイルを開く】ってあるじゃないですか。そこに【フォルダを開く】が追加されてる感じです。で、これで「フォルダを開く」と、その中にある全ての読み込み可能なファイルが、VSCodeの左端の窓にずらりと表示されるんですね。こんなかんじに。

ここでは私の「セイレネス・ロンド」の第一部～第三部をまとめてVSCodeで開いています。画像では第一部と第二部が見えてる感じ。

小説でエピソードごとにファイルを作ったりすると、いちいち読み返したり検索したりするのが面倒で、一個のファイルで作ったりしますよね。でもそれだと何かと不便なときもあると思います。そういう時にエピソードごとにテキストファイルを分けたりすることもできて、管理も難しくはない。……そういう選択肢が増えるという意味は大きいですね。また、「カクヨム」だと自分でUPしたものをバックアップとしてカクヨム的にフォーマットにしたものをダウンロードすることができるんですが、それはフォルダにエピソードがずらり。まさに上の画像のように入っています。そこからたとえば公募用に原稿を調整したり管理したりする……なんてときに超便利。わざわざ.txtファイルをコピペして連結しなくても利便性は下がりません。

フォルダの中をまるごと検索！

システム系の人ならgrepってやつを使いこなしちゃうと思うのであんまりアレですが、一般の方はgrepってなんぞやな感じでしょうし、そもそもコマンド使えというのは殺生な話。ところが、このVSCodeでは、普通の検索と同様に「開いているフォルダ」の中を検索して、結果を出力してくれるんです。しかも、検索対象フォルダは一つ二つに限りません。いくつもフォルダは開けるので、やろうと思えば全フォルダのテキストファイルの中から特定の単語を検索したりすることもできるんです。この画像を見てください。先述の通り、「セイレネス・ロンド」の3つのフォルダを開いている状態ですが、それをまとめて検索しているのがわかります。

これにより「あの単語どこで使ったっけ」とか「●●はどこで初登場だっけ」というのが一瞬でわかります。ファイルをいちいち開いて検索して……なんていう無駄を完全に除去できるんですね。

とにかくこの機能が便利すぎて怖い。小説書く人なら、この機能の恐ろしさはすぐピンとくるはず。

プラグインがすごい

プラグインっていうのは「追加機能」のようなものだと思ってください。「このプラグインを入れるとこういう機能がつきますよ」的な。そうやってVSCodeを自分好みに成長させていくわけですね。VSCodeをインストールしたら、以下の見出しになっているワードで検索するとすぐに見つかります。

CharacterCount

個人的におすすめしたいのが、「CharacterCount」。以下のような機能です。

• すべての空白文字(全角/半角スペース、改行、タブ)
• ルビ範囲指定記号(《》)とその中の文字
• ルビ開始記号(「|」、「｜」)

小説投稿サイトに参加してる方なら、この意味がわかりますよね？　ルビとかを除いた「本当の文字数」をリアルタイムにカウントしてくれる機能です。コレ本当に便利。モチベーション維持にも大いに役立ったものです。

Convert Ruby

そしてこれ。HTML形式と小説投稿サイト形式のルビをコンバートしてくれるというやばいやつです。コレは解説が難しいのでアレですが、私には超役立ちました。ここで紹介した2つのプラグインは、どっちも小説書きさんでもある8amjpさんの手によるものです。小説投稿サイト経験を生かして、WEB小説書きさんに使いやすい機能を作ってくださったわけですね。是非おためしあれ。

Markdown All in One

実はこの記事、この「Markdown All in One」というプラグインの機能で書いています。これ、小説本文では使えない機能ですが、「設定資料」を書く上ではやばいほど約にたちます。簡単に見出しをつけれたり、目次を自動生成してくれたり、とにかくやばい。特に知識がなくてもすぐに使いこなせるくらいの簡単さですし、VSCodeの左にマークダウンで本文書いて、右側にその画面を表示させておく、なんてこともできるし、本文を左、設定資料（マークダウンで整形済み）を右に表示、なんてことも。自由度が極めて高いのもVSCodeの特徴です。

ちなみに↓の画像がこのブログ記事の下書きです。左の画面で執筆し、右の画面で見栄えを確認しています。が、たとえば、このようにキャラクター紹介を書いて、右の画面に表示しておきます。で、左の画面は小説本文タブに切り替えると……なんと、ウィンドウを切り替える必要なく常に自作資料を見ながら執筆ができるのです。

更にその上、こうして整形したマークダウンの画面をたとえばPDF出力したりできちゃうんです。表も作れたりするので、かなりかっちりした設定資料をPDFにできる。これ、思ってる以上に興奮すると思いますよ！（笑）

7/15追記

↓のページも、[Visual Studio Code] + [Markdown All in One]で書きました。

「セイレネス・ロンド」世界の要素を数値化してみる - セイレネス・ロンド / 統合情報サイト

とりあえず「静心」ベースですが、キャラクターの来歴こそ違うところもありますが、ユニットベースで考えた場合は「セ

seirenesrondo.xyz

マークダウンエディタについての記事も書きました。ぜひ。

ワードプレス更新作業の強い味方、マークダウンエディタ！

スマホでマークダウン ワードプレス更新の際には、基本的にはパソコンにて「VIsual Studio Code」にプラグイン「Markdown All in One」突っ込んでの作業になるんですが、スマホでも効率よく作業できないものかなという...

ken1shiki.xyz

2021/07/15 12:40pm

2021/12/25追記

小説執筆に「VisualStudioCode」を使う時に使える拡張機能・縦書き＋α

以前、このような記事を書いて紹介しています。VisualStudioCodeのインストールについても書いてます。入れておいて損の無いエディタなので「そんなに専門的（ぽいの）要らないよ～」なんて方でも入れてみてください。難しいこと無いので。 ...

ken1shiki.xyz

2021/12/25 4:29pm

The post 「小説執筆」、何を使っていますか？ first appeared on 文章で生きていく.

挨拶はこの辺にして、さっそく導入手続きを進めていきましょう。「カクヨム」に「Google Analytics」を連携させるのはとっても簡単なんです。「Google Analyticsの見方」に関しては別のエントリでお話するとして（ていうか、それだけで本一冊書けます……）、今回はまずは登録してみましょう！　早い方がいいです、登録は。

導入手順

Google編

まずはGoogleアカウントを登録する

▼https://www.google.com　に行きます。右上に「ログイン」とあるので、ログインしてください。

この時点ですでにログインされている場合は、「Google Analyticsの登録→トラッキングIDを取得する」まで進んでください。

▼「アカウント」をすでに持っている場合はログインしてください。
　持っていない場合は、左下にある「アカウントを作成」を押してください。

※ここで「自分用」か「企業用」か訊かれるので、「自分用」を選択します。

▼必要な情報を入力します。本名じゃなくてもいいです。入力できたら「次へ」を押します。

▼無事にgmailのアカウントが確保出来たら、その他の情報を埋めます。
　再設定用のアドレスは、ここで入力しておいた方が良いです。入力出来たら「次へ」。

「プライバシーポリシー」→「同意する」と進むと、アカウントが完成します！

Google Analyticsの登録→トラッキングIDを取得する

https://marketingplatform.google.com/about/　にアクセス

▼ページ真ん中あたりの画像の赤丸をクリック。
　この📶のようなマークがGoogle Analyticsのアイコンです。覚えておいてください。

▼でっかいフォントの下にある「無料で利用する」をクリックします

▼画面右にある「登録」ボタンを押します。説明は特に読まなくて良いです。

▼するとなにやらめんどくさそうな画面が出てきます。が、↓の赤枠の通りに埋めてください。
　 そして下の方にある「トラッキングIDを取得」を押下 します。

▼「日本」（ドロップダウンリストの下の方にあります）を選び、チェックを入れます。

▼「同意する」を押して少し待つと次の画面になります。
　もし、Android？　iOS？とか訊かれたら、とりあえず「興味なし」でOK。とりあえずPCで見られることだけを考えよう。
　（スマホでみたければ、Google Analyticsのアプリ入れればいい話）

　 赤い四角で囲んだ「トラッキングID」だけが重要。この「UA-～」をコピーしておく。

これでAnalytics側の設定は完了。お疲れさまでした。作業はあとちょっとです。

カクヨムにGoogle Analyticsの設定をする

「カクヨム」にアカウント登録をする

この手順は端折ります。すぐ終わります。

「カクヨム」にトラッキングIDを設定する

▼まずは画像のように「アカウント名」→「アカウント設定」をクリック

▼「その他」タブをクリック

▼ページの下の方にある「Google Analyticsの埋め込み」欄に、先ほどコピーした「UA-なんちゃら」をペーストします。

「変更を保存」で登録完了！

以上で「Google Analytics」と「カクヨム」の連携設定は完了です！

それでは良き執筆ライフを！

The post 【必見】Google Analyticsの導入方法【カクヨム】 first appeared on 文章で生きていく.

OpenPNEやばい

最近、とある事情で「OpenPNE」を使ったSNSコミュニティを作ることになりまして、そのお手伝いと動作検証等々をすることに。最初は軽い気持ちで「ひさしぶりのTera Termだー」って感じだったんですが、なにこれ、めっちゃてごわい！　OpenPNEヤバイ、マジヤバイ！　ってなって、一式鍵の技術屋魂が久しぶりに炎上。

結論としては何とか動かせるところまで持っていけました。既存のサイトは正直ほぼ役に立ちません。片手落ち。しかし私の以下の手順を見れば、起動から招待 or 登録などなどまで一通りできるようになります。ただし、カレンダープラグイン（opCalendarPlugin）、こいつだけは解決できませんでした。

まずは↓を借りる所からです。

作業手順

ダウンロード→FTPでアップロード

OpenPNE公式よりダウンロードします

★OpenPNE公式はこちら

基本的に最新版でいいはずです

ファイルの解凍

任意の場所にzipファイルを解凍してください。zipファイルは残しておきましょう。

FTPソフトを使ってアップロード

まずはFTPソフトを手に入れてください（FFFTPなど、何でもよいです）

★FFFTPはこちら

エックスサーバにてFTPアカウントを作ります

サーバにアップロード

参考までに、接続設定はこんな感じ。この辺は気合で乗り切って欲しい。難しくないので。

public_html内にUPLOAD

ドメインのすぐ下に「public_html」があるので、何も考えずにUP。かなりの時間がかかるので、寝る前にやるなどすると良い。また、途中で「アップできない」ファイルも出てくるが、私は全部無視してアップロードを継続しました。

MySQLの設定を実施

エックスサーバのサーバパネルに「MySQL設定」があるので、「①MySQL追加」→「②MySQLユーザ追加」→「③MySQL一覧」でユーザを追加したSQLに追加します。それぞれの情報が必要になります。覚えておきましょう。

忘れがちなのがホスト情報、↑の③のところの画面下部にこのような情報があるので、控えておきます。

PHPのバージョンを変更する

残念ながら、OpenPNEの現行版は、PHP7～では不安定（動かない？）ようです。サーバーパネルで「5.6」に変更してください。

私はしばらくコレでハマりました。5.6.36は正式サポートされているので、これにしてください。

Config系のコピー＆リネーム＆書き換え

コピーして.sampleを削除

最初の方で「解凍」したフォルダのすぐ下に「Config」フォルダがあります。この中にある二つのファイルをコピーして、拡張子になっている「.sample」を削除します。↓の図のようになるはずです。

OpenPNE.ymlを加工

コピーして.sampleを取り除いたファイル、「OpenPNE.yml」の以下の個所を修正します。最初の部分だけです。

base_url =”ドメイン/web/”にする。万が一間違えても、修正後再度このファイルをアップロードし、「管理画面」の「SNS設定」から「キャッシュを削除する」ことで適用させられる。困ったらキャッシュのクリア。大事。

SSH設定からのTera Term起動→接続

ハマる人の多いのがこのSSH。

サーバパネルでSSHをONにし、鍵を登録

ここを「ON」にしていないと何もできません。

次に隣の「公開鍵認証用鍵ペアの生成」で「パスフレーズ」を入力。必ず覚えておきましょう。設定すると、「公開鍵（なんちゃら.key）」というファイルがダウンロードされます。

さらにその次のタブ「公開鍵登録・設定」に進みます。「登録済み～」の文字があるので、それを押して「確認」ボタンをおします。これで準備完了です。

Tera Termを入手

★Tera Termはこちら

Tera Termの初期設定を実施

Tera Term起動（接続ウィンドウはキャンセル）→「設定」→「SSH認証」

「新しい接続」では「ポート番号」を「22」から「10022」に変更。入力値が間違えていなければこれでつながる。

インストールの実施

以下のように入力する。選択の余地はないので、このまま。

インストールが完了すると、今度は各種情報を訊かれる

1. mysql
2. MySQLで追加したユーザ名
3. そのパスワード
4. mysqlで始まり.xserver.jpで終わるホスト名
5. MySQLで追加したデータベース名
6. 「ｙ」を押下

これでインストールは完了する

.htaccess を書き換える

.htaccessを以下のように二箇所、書き換える

ここまでで一通りOK

管理者ページでの設定

新規登録の方法を決める

①→②→③の順に押下

「設定変更」を押して確定。これでログイン画面に「新規登録」が出現します。

既存のプロフィール設定を変える

たとえば「性別」が「男性」と「女性」だけなことに抵抗を示すこともあるでしょう。ここでは「謎」という性別を追加してみます。以下の手順の通りです。

/lib/config/config/preset_profile.yml 　にある以下の部分に書き加えます。

これだけでも動くのですが、どうせなら日本語に対応させましょう。

/apps/api/i18n/messages.ja.xml
/apps/mobile_frontend/i18n/messages.ja.xml
/apps/pc_backend/i18n/messages.ja.xml
/apps/pc_frontend/i18n/messages.ja.xml

上記４ファイルは開いてみればわかるはず。更新したら、それぞれに適した場所にアップロードしてください。

プラグインを適宜インストールする

実はこいつらが曲者です。インストールだけなら良いのですが、実装すると不具合が……。でも実装しても管理画面から「利用しない」ことにすればなんとかなるので、とりあえずお好みを。

★公式サイトのこのページからコマンドの取得ができます

それぞれ気に入ったプラグインを叩くと別窓が出てきますが、一か所そのままじゃダメな所がああります。↓の画像の最下部、「target」のところ。1行目はそのままコピペで良いのですが、2行目はtargetの前は「–」なので、必ず書き換えるようにしてください。

エラー無くインストールできればOK,いよいよ公開です。

公開

というわけでめでたく公開

http://ドメイン名/web/　で、ログイン画面。（id:sns@example.com password:password)

http://ドメイン名/web/pc_backend.php　で、管理画面。（id:admin password:password）

アクセスできることや、ユーザ作成・招待ができることを確かめて完了です。

以上、参考になりましたでしょうか。

The post OpenPNEインストール手順＠エックスサーバー first appeared on 文章で生きていく.