Web制作・ビジネスの最近のブログ記事

もう少しライトな感じで読めそうなものを追加しようかと。

本読もうね(写真)

会社を辞めないという選択 会社員として戦略的に生きていく

いきなり経営者目線からサラリーマン目線とか言わんとって欲しいですが :-p 、事業部長もチームリーダーも会社の中で働いてることに変わりはないわけなので「会社の中でどう生きるか」について考えることが無駄になる事はないでしょう。

人はどんな場所にいても
社会を動かす仕事ができるはずだ。
考えよう
「会社にいるからできないこと」じゃなく
「会社にいるからこそできること」を。
使われる人生じゃない。
  • 会社で日々繰り広げられているのはチーム戦
  • 自分の給料の金額がどういう理由で決められているかと考えてみる
  • 社会人10年目から自分のストーリーが面白くなる
  • 年齢とともに、可能性や選択肢は広がっていくか、狭まっていくか、どちらだと思いますか?

この本を読んだのは経営者になってから10年以上経過してからですから、違う立場で読んだ事は間違いないですが、サラリーマン時代を振り返って(精一杯やりきってから会社を始めたとずっと思っていましたが)、別に会社にいてもできなかったことじゃないというか、今の自分ならもう少しなんとか道はあったんじゃないかなぁとか思ったりします。いるかいないかわからないですが、うちの会社辞めて独立したいと思っている人がいるとしたら、考えきって、やりっきて、会社で可能性を追求してからやってみなよって言いたい。ま、一度読んで考えてみなよ、と言いたい。

マンガ 餃子屋と高級フレンチでは、どちらが儲かるか?

ま、そんなに読書嫌がんなよ、ってことで漫画をひとつ。 経理部門にでもいない限り会社員やってると会計とか数字について考える事ってあんまりないんですよね。会計をかじると何で経営者がそんなに数字にうるさいのかが理解できるかと思います。また、ビジネスモデルってもんをいろいろ考えることで、頭をやわらかくできる効果も見込めるかも。あと、自社の決算書を見て、良い、悪いを自分なりに判断できることも大切です。

ま、なにぶん漫画ですから、一度読んでみたまへ。※

※とはいえ、それなりに難しいテーマを無理やり漫画にしてるので、斜め読みだと理解できない代物です。

コミック版 100円のコーラを1000円で売る方法3

もひとつ漫画。価格や差別化戦略について考える題材に。私が読んだのは漫画じゃない方ですけどね(100円のコーラを1000円で売る方法3 )。Amazonのレビューはあんまり高くないな。ま、あくまでも初心者向けですが、マーケティングとか考えた事ないって人がはじめて考えるきっかけにはいいのではないかと思います。

でね、これ敢えてシリースの「3」にしたの、テーマが会計ソフト、webサービスが題材になっているからです。身近なテーマの方が頭に入りやすいものね。

下町ロケット (小学館文庫)

ビジネス書でも何でもないじゃん! なんだけど。ドラマ化されたし、見たって人はそれでもいいんだけどね。中小企業で働くってことを考える教材としてはええんちゃうかな。

俺はな、仕事っていうのは、二階建ての家みたいなもんだと思う。一階部分は、飯を食うためだ。必要な金を稼ぎ、生活していくために働く。だけど、それだけじゃあ窮屈だ。だから仕事には夢がなきゃならないと思う。それが二階部分だ。夢だけ追っかけても飯は食っていけないし、飯だけ食えても夢がなきゃつまらない。

青臭い小説やドラマのセリフである事に違いはないんだけど、日々の仕事に追われて新しい製品やサービスの開発が後回しになっちゃいけないよってことだ。これは我々の様な会社にぴったりの表現ではないか。

プレゼンの極意はマンガに学べ

セミナーで松尾さんに教えてもらった本です。

全社会議なんかの発表を見てて、プレゼンの場とかあんまりない人に何か勉強させる機会ないかなぁとか思ってるわけなんですが。

ただ、この本にはプレゼンの具体的なテクニックはまったく書いてありません。「わかりやすさとはどういうことか」「読者を引き込むための工夫」「企画におけるポジショニングの定め方」など、ビジネスに必要な要素を漫画を題材に解説している本、と思った方が良いです。

プレゼンの具体的な話は他に読んだ本があったけど、今手元にないや。あとで追記するかも。

追記。思い出した。

TEDトーク 世界最高のプレゼン術

TEDの動画はわりとどれも面白くて、よく見る機会があるんだけど、ストーリーとして洗練されていてよく練習されているような印象を受けます。CSS Niteなんかでも鷹野さん結構厳しくて(僕は我が道行っちゃうんですけど)、プレゼンは聴衆の時間を奪っているということを意識するのが大切だと思わされます。

  • アイデアは短いキャッチフレーズで
  • パーソナル・ストーリー
  • ショッキング・ステートメント
  • インパクトのある質問

(web)業界柄、PC1台でどこでも仕事ができる業態、自然と周りにデザイナーやプログラマなどフリーランスの人が多いのですが、仕事が軌道に乗って屋号をつけてビジネスをしていく中で少しづつ仕事が増えたことから、法人化を考えて人を入れるようなケースを時々見かけます。

私も13年前に1人で会社を始めた口ですが、最初から会社を作ろうと思うのと、自然発展的に法人化をする違いについて少し書いておきたくなりました。

きっかけは、100万円ちょっとの請求書が3週間遅れで届いたこと。お小言言うつもりもあんまりないんですけどねw

尚、私のこと知ってる人には言うまでもないですが、クライアントワーク、いわゆる受託のシステム開発やクリエイティブ系の仕事の話です。

ノートPCでリモートワーク

法人化の目的は何かを今一度考えること

節税のための法人化ってのもあるのでしょうけど「取引条件に必要だから」「信用が得られるから」ということでの法人化であれば考えておかないことがあります。「信用と責任はセット」ですから、どういう責任を法人化によって自分は負うのだということを考えておくべきでしょう。以下はその一例です。

月商の2-3倍程度のキャッシュを用意しておくこと

今回のことで言いたいことをひとことで、というとこの一文になります。 月商が200万円とすると(2〜4人くらい?)600万円、少なくとも2ヶ月分とすると400万円。

このくらいの商いをしていると「納期2ヶ月、300万円」みたいな仕事がボチボチ相談くるようになるんじゃないかと思います。月商の1.5倍ですからこれはそれなりに大商いですよね。以前にどこかのセミナーでも話しましたけど、納品後一括検収、一括振り込みでの仕事の場合、余力は月に50万円分しかありません。この仕事を受けると自然に小さな仕事を断るか外注するかくらいの選択肢しかなくなるわけです。

売上に関係なく固定費は常に出て行く、利益が出れば税金も必要

固定費だけならともかく、小さな仕事の外注費も月単位で出て行きます。そうなれば「納期2ヶ月、300万円」を受けるためにはその間の固定費を支払えるだけのキャッシュが必要になります。もちろん、「納期2ヶ月、300万円」を受けずに手元資金とのバランスをとって小商いに徹するのも「あり」です。その場合はキャッシュの「出」「入り」を注意深く見ていかなければなりません。それがいわゆる「資金繰り」で、そこの苦労を背負わずにもっと積極的な受注、成長をしていきたいのであれば、やはり月商の2-3倍程度のキャッシュを用意しておくということになります。利益が出れば法人税も必要ですし(はじめて大きめの利益が出た時に愕然とするんですよねだいたい)。

人を採用する際には、ビジョンが必要

フリーランスから法人化し、受注規模に対して1人増え、2人増えというケースに「採用計画」があるでしょうか? どちらかといえば「仕事が増えて人が足りない」ということに追われて規模を拡大しようとしていませんか? 私が感じていることで危惧していることは、「終わり方を考えて中小企業を始める人はあまりいない」ことです。会社を将来どうしていきたいのか、働く人になにを求め、彼ら彼女らがどのようなキャリアをこれから積んでいってもらうのか、彼ら彼女らの将来ビジョンは何で、それにどのように答えていくのか。そのプランがないままに人を増やしていくと、気づいた時に数年経ってしまって、「さて、俺たちはどこへ行こうとしているんだ?」ということになりかねないです。

職人なのか、会社なのか

クリエイティブ職で著名なデザイナーの個人事務所なんかの場合、その人の看板が会社のすべてですからわりとはっきりしています。その人から技を学んで将来は独立ってやつですね。これも一つのキャリアプランですから、「お前、いつまでもここにいないでそろそろ独立考えろよ」っての。これも一つの将来ビジョンの示し方です。働く人もそれ分かっているんなら、ハッピーな雇用関係の形ですよね。有名なコンサルタントの個人事務所や著名なカメラマンの個人事務所なんかもこれに近い。アシスタントのような形で経験を積んだら、独立を考えなければ上がつっかえてますからね。カメラマンやデザイナーなんて、年齢積んだって仕事続けられますし。

そういう意味では、成長プランのない中小企業は高度成長期以降の、ポジションが足りない問題のもっと極端な奴がやってきます。上が引退せず、会社が大きくならなければ、下の人にポジションは生まれないしキャリアも積めないですからね。

ということで、ビジョンを持った中小企業では、人材を募集しています。

すいませんすいません、前の夜にちょっと頭にくることがあって明け方まで飲んでたらそのまま寝落ちしてしまい、翌日社員に電話で起こされたので十分な準備もできずお話ししてしまったので海より深く反省しつつ。

セッションの写真

伝えたかった、プレゼンに勝つための4要素

  1. ターゲットによってアピールポイントを変える
  2. CMS製品と同じだけ「会社」「プレゼンター」をアピールする
  3. 言い訳を用意してあげる
  4. 背中を押してあげる

誰にプレゼンするのか。部門ごとの注意点。

CMSの導入をどの部門が主導で行うかって実は結構バラバラです。代表的なものは次のような部門となります。

  1. 企画・広報・総務部門
  2. 情報システム部門
  3. マーケティング部門
  4. 営業部門や製造部門などのwebと直接関係のない部門
  5. 経営者自身

その他にメディア系企業では編集部とかネット専業企業の場合はそのものweb部門がある企業なんかもあります。

経営者へのプレゼンを行うか、否か

上記の5つの顧客ポジションのうち、最後の「経営者自身に対するプレゼン」ですが、これを行うかどうかは「どの市場を相手にビジネスを展開するか」という戦略と密接に絡んできます。ちなみにアルファサードでは経営者自身にプレゼンを行うことはほぼ皆無、実質ありません。これは、ライセンス料の値付けが関係しています。

  • PowerCMS Standard 5ユーザー 30万円
  • PowerCMS Professional 無制限ユーザー 60万円
  • PowerCMS Enterprise 無制限ユーザー 90万円
  • PowerCMS Advanced 無制限ユーザー無制限サーバー 180万円

当社のCMSは上記の価格です。これにオプションや初期構築などのSI、ケースに応じてインフラなどの構築コストが追加されます。

CMSのライセンス料金は、全体コストの20%が上限

CMSの場合、CMSを導入すればすぐにサイトの更新ができるようになるわけではありません。例外としては、CMSにあらかじめ用意されたテーマを使ってサクッとサイトを立ち上げるケースでしょう。WordPressなどはこのあたりに強みがあります。一方でPowerCMSの場合、用意されたテーマでサイトをそのまま運用し始めるようなケースは稀で、オリジナルのデザインのサイトをベースにガッツリつくり込むタイプのサイトが多いです。有償の商用CMSですから、このライセンスコストと初期構築のバランスをクライアントは意識されます。この、コスト感覚からいえば、私の経験値から「CMSのライセンス料金は、全体コストの20%が上限」という数字が感覚としては合っているように思います。つまり、Professional版なら初期構築の総予算300万円、Enterpriseなら初期構築の総予算450万円、Advancedなら900万円。

この規模の予算を用意する(できる)クライアントのweb担当者は、まずもって経営者ではありません。地方のサイト制作では経営者が直接ハンドリングする場合もあるでしょうが、そのケースで予算300万円を超えるケースは少ないと思います。よって、PowerCMSはライセンス金額の設定によって経営者が直接決定に関与する規模の案件、クライアントではなく、経営者以外の誰かが決定者である規模以上のクライアントをターゲットにビジネスしているということになります。必然的に東京が主戦場になります。

一方で、当社のようなメーカーの場合、直接エンドユーザーにプレゼンしない場合もあります。いわゆるCMSを提案する立場の以下のようなお客様んい対するプレゼンが必要なケースなどです。

  1. web制作会社
  2. 広告代理店(web部門、子会社など)
  3. SIer(子会社など)

テーマが広範囲に渡りすぎるので、このケースは一旦別の機会にゆずることにします。ここで検討するのは下記の4部門です。

  1. 企画・広報・総務部門
  2. 情報システム部門
  3. マーケティング部門
  4. 営業部門や製造部門などのwebと直接関係のない部門

企画・広報・総務部門はワークフロー重視、現場に負担をかけずに運用を良くする提案が響く

そこそこの規模の会社でサラリーマン経験がある方はおわかりだと思うのですが、いわゆる総務企画、広報といったバックオフィス担当、直接お金やモノを生み出さない部門の人は、一般に社内ではあまり力が強くありません。普通に考えればわかると思いますが、例えばトップセールス、お客様に支持されるために営業に接待に駆けずり回ってしかも成果を上げている部門の人やヒット商品を作るために商品を作っている人からすると「直接収益に貢献している自分たちがあって会社が成り立ってんだ」という思いがどうしてもあります。お客様の都合で予定が変わることなんかもざらですし、数字が悪ければ容赦なく社内の突き上げや上司からの叱責が飛んでくるわけです。そんな毎日の忙しさの中で総務部門の人がですよ?「すいません、今度CMSというのを導入して皆様にもほーむぺーじを活用してですねぇ、webでの情報発信をお手伝いいただくことになりました」なんて気軽に言えるわけないじゃないですか。どう言えたらいいと思います? それは、以下のようなセリフですよね。

「すいません、今度CMSというのを導入して皆様にもほーむぺーじを活用してですねぇ、webでの情報発信をお手伝いいただくことになったのですが、皆様にほーむぺーじのチェックいただいていたこれまでの手順は何も変わりませんし、Wordで社内報の原稿お願いするときあるじゃないですか、あんな感じで時々お願いするだけですので。あとは我々が頑張ってやることになりましたので」

くらいに留めたいわけです。ただでさえ気を遣うんですよ。営業部の山田さん(仮)や製造部の田中さん(仮)にお願いするのって。

なので、いわゆる間接部門、バックオフィス担当者へのプレゼンでは、圧倒的に「ワークフロー重視、現場に負担をかけずに運用を良くする提案が響く」わけです。

「みなさんの画面はこんな感じで多機能ですけど、コンテンツ投入担当者の画面はこんな風になります。シンプルですよね。権限を設定するとできない機能が画面から消えちゃうので、こんなシンプルな画面になるんですね。」

くらいは見せてあげる必要はあるでしょう。

また、承認フローだけじゃなくて、サイトの確認フェイズで直接部門の皆さんに負担をかけない工夫も考えてあげなければなりません。

  • 制作サーバー >> 確認用サーバー(ここのアドレスをメールして担当者にチェックもらう >> 公開サーバー

という運用をしていたとします。CMSになっても、これが変わらないのであれば、社内でイチイチ説明する必要すらありません。これ、すごく喜ばれます。

情報システム部門は「多機能」アピールが効く。でも意外に採用ポイントは社内ネットワークやセキュリティポリシーだったりする件

情報システムの方はそれはもう諸々詳しいです。他の製品のことも良く知ってる。多機能をそのままアピールしても情報処理能力が高いから消化できる。日々色々な社内のネットワークやシステムの課題に対処していくのが仕事ですからね。多機能のアピールがそのままできます。正直楽しいですよね、プレゼンしてても。

ところが、意外や意外、採用ポイントは社内ネットワークやセキュリティポリシーだったりすることが意外と多いわけですよ。DMZがどうとかVPNがどうとか、ネットワークなどのセキュリティに引っ張られたりする。なので、「スタティックにファイルを吐き出せる」Movable Type や PowerCMS はそれだけで有利だったりするんですよね。だから CMSプロレスとかで競合だったPHP+動的前提のCMSに対してはそれだけで優位性が出るときも多いわけです。ここ、実はすごく大きな優位性だったりするんですわね。

PowerCMS の Copy2Public プラグインや PowerSyncがなんで売れるのか。これ、顧客のネットワーク&サーバー構成を変える必要がないからなのですね。合わせられる強みです。ここは、企画広報部門に対する強みにも繋がります。運用ルールを変えなくていいからですね。

PowerSyncウェブサイト

また、個人情報の取り扱いに責任を負わされるのもこの部門だったりします。フォームなどのコンバージョンに関連する機能を提供するのもCMSには求められますから、このあたりに対する答えも用意しておく必要があります。Salesforceと連携するソリューションなどは、選択肢を示すという点でも有用なアピールポイントになります。

PowerCMS for Salesforceウェブサイト

マーケティング部門にはアクセス解析やMA、デジタルマーケティングの機能が響く。でも、拡張性の高さが実は一番響いたりする

旬ですね。今この分野がいろいろ熱いですが、例えばこのあたりの市場に対して自社だけででソリューションを提供するのは中々に辛いものがあります。例えば PowerCMS でも簡単なアクセス解析の機能を提供していますが、 Google Analytics などの高機能で普及しているソリューションと同等の機能を自社で開発するのは実際に割に合いません。であれば、そのあたりの競争力の高い別のソリューションと「つなぎ込める」懐の広さ、拡張性の高さがアピールポイントになります。PowerCMSでは、Google Analytics、Salesforce、FacebookやTwitterなどと連携するソリューションがありますし、REST APIなどを通じて他のソリューションと連携する機能も豊富に用意されています。開発も簡単にできる。ここをアピールすることが響きます。

営業部門や製造部門などのwebと直接関係のない部門はとにかくシンプルで「多機能」の逆を行くこと

情シス部門や、企画広報部門、マーケティング部門と真逆で、ここへのアピールはとにかく「シンプルで負担が増えないこと」です。管理画面のボタンは少なければ少ない方がいい。多機能なソフトウェアが導入されて学習コストを負担するなんて、実際ごめんです。CMSプロレスで示したのはまさにこれです。多機能をアピールすると、学習コストへの抵抗と仕事が増えることに対する警戒心が生まれますし、そもそも消化できないです。「理系の情報処理能力」「文系の感覚的・直感的な好き嫌い」とかいうと反論きそうではありますが、情報が消化しきれなことを意識しなければなりません。

他言語サイトタイトルマッチでのカスタマイズ済みダッシュボード

CMSプロレスで工夫したあたりは以下の記事に纏めていますので、こちらも参考にしてください。

書ききれなかったので、後日続きを書きます。

先の土曜日、ハロウィンで賑わう渋谷で開催された 第2回CMSプロレス 多言語サイトタイトルマッチ に チーム Movable Type (一人だけど) 参加してきました。

結果的にいくつかのCMSと同点だったのですが、最終的には審査員の評価に重点を置いていただき、無事勝利を収めることができました! (前半に行われたクイズの点を加味すると同点だったのですが、クイズの結果相当酷かったというか、私はCMSマニアではないので他のCMSのことあんまり興味なくて知らんのです...)

CMSプロレスチャンピオンの記念品

さて、勝利したから書くわけではないのですが、今回、自分のデモンストレーションも他のCMSのデモンストレーションも見ていて、どこが勝敗のポイントになったのか自分なりに分析した結果が興味深かったので書いておこうと思います。

短時間のデモで「多機能」を伝える困難さを理解しておくこと

多言語サイトに対する機能がデフォルトで充実しているのは間違いなく concrete5、Typo3、Drupal の3つだったと思います。管理画面にデフォルトでその機能があり、対応言語数もとても多い。3者ともその部分をデモに取り入れて画面を見せていました。ここで考えておかなければならないことは「多言語に関する設定を行うのは管理者(Administrator)であり、運用者は目にすることのない画面」であることです。多機能であり且つ管理者向け機能であるがゆえに、サイト運用者には難しすぎます。そもそもサイト運用者が目にする必要のない画面なのですが、これを見せてしまった。

ちなみに、審査員の2/3は非エンジニアです。エンジニアにターゲットを絞ったデモを行うよりも、非エンジニア目線のほうが有利に働く場だったのです。

各競技のポイントは、以下の審査員によって採点されます。

株式会社ロフトワーク

WordPressの場合は、複数のプラグインソリューションがあるという紹介だったと思います。プラグインの多さは言わずもがなWordPressの強みであることに間違いはないのですが、どこをアピールするのかが今ひとつはっきりと絞り込めていなかったように思います。

一方で、私がとった戦略は「多機能」アピールをしないことでした。PowerCMSでなく、PowerCMSの入っていない純粋? なMTで、しかもダッシュボードを極端にシンプルにして臨みました。運用者の目に飛び込んでくる大きなボタンは何と2つだけです。多機能の真逆、Less is Moreですね。

極限にシンプルなダッシュボード

URLの設定についての文化の違いとアピールポイント

今回のCMSのうち、Movable Type(PowerCMS) だけが静的ファイルパブリッシュを基本としたCMSです。「基本」と書いたのは、MTはダイナミック・パブリッシングもサポートしていて、動的生成もできるのですが、DynamicMTMLというその中間(ファイルの一部を動的処理する)形式もサポートしていて、動的サイトではこちらを使うことが(当社では)多いため、基本ファイルを生成する運用がほぼ100%。こうなると、CMSの設定でURLの見せ方を変えるような文化がそもそもありません。パブリッシュ後静的生成されたファイルを別のサーバーに転送(同期)して運用するようなケースも多く、国ごとに配信するサーバーを分けて別のサブドメインで運用するなんてことも普通にできます。ファイルを吐き出した後のURLの設定はwebサーバー(Apache、IISやnginx)の仕事になるため、CMSでできることは限られています。もちろんファイルを吐き出すパスについては自由に設定でき、いわゆるMTのアーカイブマッピングはなかなかに柔軟で強力なのですが、正直このテーマで盛り上がる他のCMSの感覚が理解できず、ここは何か逆に不利なシチュエーションだな、と思っていました。

なので、結局は文化の違いとファイルを吐けるメリットのみ強調して、特に機能のアピールはせず。まぁ、これも運用者にはわりとどうでも良い話なのかもしれません。

ただ、大事なことなので繰り返し言いますが、この設定画面も「管理者(Administrator)であり、運用者は目にすることのない画面」なのですね。この画面を見せても少なくとも運用者アピールにはなりません。

ディテールにこだわること

今回、要件を満たすために、当日の朝ギリギリまで作り込んでいました。当日、時間の関係で(変に盛り上がってしまった?関係で)、サイト運用者による実際のページ作成・更新が行えなかったのは残念ですが、すべての要件通りにきちんと動作するように作り込みつつ、細かい部分を画面だけでなく、プラグインによって要件通りに動作させる部分について相当作り込みました。標準機能ではPowerCMSも入っておらず「多機能」の逆ではありましたが、反対にシンプルな画面に必要な機能をコンパクトに凝縮させました。

ウェブページ編集画面

ウェブページ編集画面のカスタマイズポイントは主にこの5つ。

  1. 各言語のトップページを確認するための画面右上の国旗アイコン
  2. 入力順と表示順を同じにしたサブタイトル入力欄
  3. 言語タブの実装(タブの追加とラベルのカスタマイズ)
  4. Translator API - Microsoft Translatorを利用した翻訳テキストの挿入機能
  5. 言語ごとに公開制御できる機能

5の部分については、mt_entry_status_en/mt_entry_status_tw というカラムを追加して、値の有無でファイル書き出しの制御を行いつつ、各言語の一覧表示を制御するテンプレート・タグ(フィルタ)を作成しました。ただ、このあたりの裏側の仕組み(テンプレート・タグ)は、これも「管理者(Administrator、もしくはDesigner)であり、運用者は目にすることのない画面」ですから、あまりアピールせず、管理画面のチェックボックス実装のみさらっとアピールすることに。

<MTPages status_filter="$lang">
    各言語の公開フラグ付きページの一覧
</MTPages>

実際に動かしてみることの説得力

デモで見せようと思っていたのは2点。Microsoft Translator API を使ったリアルタイム機械翻訳と、翻訳データCSVファイルからの翻訳フレーズ一括登録>パブリッシュ>サイトの多言語化完了(5秒でサイトが多言語に変わる)の2点です。

翻訳CSVからの一括データ登録

Microsoft Translator API を使ったリアルタイム機械翻訳については、concrete5が数日前にプレスリリースを出していたのを見ていて、敢えて準備していきました。ここだけは、ま、狙ったところですね。CSVの件も機械翻訳の件も Drupal、Typo3、concrete5あたりからお話はありましたが、実際に動かしてみせたのは Movable Typeチームのみ。実際に動くことの説得力が効いたのは間違いないと思います。

その他、MT Studio(開発ツール)やPowerCMSを使ったカスタム・マスタ(テーブル)を作成するデモも行いましたが、何を実際に動作させてみせるかについては事前にある程度絞りこんでシナリオを作成しておきました。

もう一点(追記)、アイテム挿入の際の altテキストを各言語のものにするところも見せました。細かい所ですが、画像の代替テキストも多言語対応、という部分で敢えて他の陣営が触れなかった部分も作り込んでおいたあたりも細かなアピールに繋がったのかもしれません。

画像の挿入ダイアログの多言語対応

自信をもって演じきる、可能性を感じさせる

途中の質疑応答で最終で見せようと思っていたMT Studio(開発ツール)やPowerCMSを使ったカスタム・マスタ(テーブル)を作成するデモを見せてしまったので、最後はmacOSのデスクトップアプリからブログを実際に更新するデモ、CMSに登録済のアイテム(画像)をデスクトップアプリでリアルタイム編集するデモを行いました。ここだけアドリブですね。他は計画どおりです。最後は MTDataAPIDebuggerも紹介してデバッグツールもあること、1週間程度あれば投稿用アプリも作成できる可能性があることを自信持って言い切りました。

おまけ - 真面目に馬鹿なことをやってみせる

ひとつだけ、アドリブでネタを仕込みました。concrete5 のデモの際に、ドロップダウンで表示される対応言語数の多さ(スワヒリ語とか余計なこと言ったのはお詫びします :-p )にヒントを得て、いつぞやのエイプリルフールに作成したプラグインをインストールしてテンプレートにタグを一つ追加、アルファサードの経営理念を大阪弁に変換するデモを入れました。実はこれが一番ウケたのだったりして...

アルファサードの経営理念を大阪弁化してみた。アルファサードはテクノロジー(web技術)の会社や。主役はお客様であり、パートナー様であり、うちらの提供する製品やサービスを用いて作られ運営されるwebサイトでありアプリケーションや。うちらは主役ではなく裏方や。うちらは、うちらとともに何ぞを生み出し、育てたいと思ってくださるお客様とパートナー様に寄り添いまんねんわ。 また、お客様とパートナー様が提供するwebサイトやアプリケーションが成功することでお客様の利益に貢献し、お客様とパートナー様とともにうちらが成長すること。また、設立以来一貫して取り組んできたwebアクセシビリティ技術を通じて「どなたはんもが状況やデバイスや障害の有無を問わず情報にアクセスできる社会の実現に寄与する」こと。これがうちらの存在意義や。

これは流石にジョークプラグインではありますが、こんなことも実現できるんだよってアピールには繋がったのかもしれません。あとは会場の空気を変える効果も。ホンマになんでもやりよんな! こいつ と思わせることに繋げられたことは間違いないでしょう。

最後に、ベテラン、慣れてるから(野田さんだから)できる、への反論

ひとことでいうと、これを自分でなくてもできるように、という発想から作ったのが PowerCMS なのです。確かにコストはかかりますが、コストをかけることで、ノウハウと時間を買えるということを理解していただけたらと思います。

※これ、今回MTの実装としてはよくできたと思うので、コミュニティの勉強会の材料にしたいと思っています。どなたか企画してくれませんかね(チラッ

全盛ってのは言い過ぎかと思いますが、IT、webの業界では結構進んでいる印象があります。パートナー企業のシックス・アパートさんもこんなリリースをしておられました。

アルファサード株式会社でも「週一回までの在宅勤務選択可」制度を導入してこんな記事上げてるわけですが、私自身リモートワーク取り入れるメリット、働く人自身のメリットもよく理解しているしIT、webの業界なわけで「職場でなくても仕事ができる」と思ってます。

  • 多様な働き方を受け入れることで、従来戦力化できなかった人材の活用
  • 従業員満足度の向上による離職率の低下、リクルーティング力の向上
  • 各種コストの削減、有効な時間利用

世の中的にもそういう流れになっていっているようにも感じるのですが、職場で一緒に働くメリットももちろん数多くあるので、 ここでは逆に(現在のところ)リモートワークでは難しいと思われることを少しメモしておきます。

東京オフィスの風景

逆に、オンラインコラボレーションツールではことあたりのことが次の課題と言えるのかもしれません。

メンバーの状態に気付くこと

ま、これに尽きると思います。勿論、性善説というかリモートワークしてたらサボってる奴もおるかもしれんってそんなことはたいして気にしない訳ですが(気にしないというか、管理の仕方やツールの活用、オンラインでのコミュニケーションの工夫などでカバー可能)、単にその場にいることで気がつくことって色々あるものです。

電話のやり取りを見ていて気付くこと

例えば電話。電話相手の声まで聞こえる訳ではないですが、対応しているメンバーの話ぶりや話す内容から「ひょっとしてクレームに?」とか、聞き慣れない先からの電話をつないだりした時に(自分が繋がなくても「Aさん、〇〇社の誰々さんからお電話です」みたいなのを聞いている時に、色々気付くことがあります。同じ相手から頻繁に電話かかってきてて、しかもそれが長いとかあれば、当たり前に仕事の進捗に問題が出そうなことに気付きます。

メンタルや健康状態についての気付きを得ること

元気がないとか顔色が悪いなんてのは当然として、遅れてくるとか、会話のトーンが違うとか覇気がないとかそういうのは文字のコミュニケーションだけではつかみきれません。やっぱりフェイストゥフェイスってバカにできないな、と。

行動、画面を観ること、話しかけることで気付きを得ること

職種にもよるけど、どんな管理画面作ってるのとか、今何をやってるのかとか、その人のディスプレイ見てたらよくわかります。当たり前ですね。でも、思ったより深いところがわかるんですね。同じ回答でも、顔見てて「あ、これわかってないな」「納得してないな」とかね。

エンジニアがエディタ画面開きっぱなしで難しい顔してしばらく指動いてなかったら「どっか引っかかってる?」って声をかけることができます。報告受けてるものと、何か違うものを作りつつあったりして、早めに気付いて会話すれば、手戻りを防ぐこともできます。

会議やミーティングを観ることでの気付きを得ること

これはもう、会議の質や無用な長さ、無駄な議論などを改善する機会になります。チャットミーティングに出ればええやん、てのも勿論ありますけど、「社長呼ぶまでもないよな」みたいなミーティングには当然呼ばれない訳で、そういうのが職場で対面で行われていれば、少し注意して観ることで気付くこと、結構あります。

テレビ会議システムは良いものを使うとメリットが大きい

両拠点のハード込みとなると総額で100万円を超えるということで、さすがにどうかと思いましたが、お試しで実機をお借りすることができ数回試してみました。Skype や Chromebox と比べると明らかに音切れがなく、最終的にリース契約で導入を決めました。

会議システム

いや、本当にこれでストレスなくなりました。値段の高いものはやはりそれなりの価値を提供しているものなんだな、と実感しているのでした。

私の会社(アルファサード株式会社)では、第13期から電子公告を始めました(ちゃんと定款変更もしました)。

電子公告を始めた経緯というか考えなどはまた別の機会に書こうと思いますが、ここでは表題の通り貸借対照表のマークアップを取り上げます。

「貸借対照表(B/S)」こそ「複雑なデータテーブル」ですね。

アクセシビリティ・サポーテッド(AS)情報:H43

見解としては「要注意(スクリーンリーダーによるサポートが十分とはいえない。)」

id属性とheaders属性を使わないですむように、できるかぎり単純な構造にしたほうがよい。

ということで、表を3分割することも検討したのですが、流動資産と流動比率を対比してみたい(流動比率とかを見たい)とかだと同じ表のほうがいいだろうかとか、でもそうなると空のセルをつくってセルの位置を調整したほうがいいんだろうかとか。そもそも経営指標って様々な切り口があるので「何と何を並べるのがいいのか」など、決算公告ってPDFで提供してる会社が多いですが「貸借対照表の公開について」みたいなのを国(法務省)や東証がガイドラインを示すとかしてもいいんじゃないかと思ったりした次第です。

資産の部、負債の部、資本の部を別のテーブルに分割する方法も検討した

現在のところ結論があるわけではないですが、結局は idとheaders属性によるひも付けを選択しました。ご意見などありましたらいただけると嬉しいです。今後のユーザーエージェントの対応に期待します。

ということで、以下マークアップ。

<table>
<caption>貸借対照表</caption>
<tbody>
<tr>
    <th scope="col" colspan="2" id="assets"><strong>資産の部</strong></th>
    <th scope="col" colspan="2" id="liabilities"><strong>負債の部</strong></th>
</tr>
<tr>
    <th id="asset-1">現金・預金合計</th>
    <td headers="assets asset-1">254,325,832</td>
    <th id="liability-1">仕入債務合計</th>
    <td headers="liabilities liability-1">5,768,438</td>
</tr>
<tr>
    <th id="asset-2">売上債権合計</th>
    <td headers="assets asset-2">37,361,649</td>
    <th id="liability-2">他流動負債合計</th>
    <td headers="liabilities liability-2">70,318,782</td>
</tr>
<tr>
    <th id="asset-3">棚卸資産合計</th>
    <td headers="assets asset-3">534,600</td>
    <th id="liability-3">流動負債合計</th>
    <td headers="liabilities liability-3">76,087,220</td>
</tr>
<tr>
    <th id="asset-4">他流動資産合計</th>
    <td headers="assets asset-4">523,689</td>
    <th id="liability-4">固定負債合計</th>
    <td headers="liabilities liability-4">84,331,000</td>
</tr>
<tr>
    <th id="asset-5">流動資産合計</th>
    <td headers="assets asset-5">292,745,770 </td>
    <th id="liability-5"><strong>負債合計</strong></th>
    <td headers="liabilities liability-5">160,418,220</td>
</tr>
<tr>
    <th id="asset-6">有形固定資産計</th>
    <td headers="assets asset-6">36,334,934</td>
    <th scope="col" colspan="2" id="capital"><strong>資本の部</strong></th>
</tr>
<tr>
    <th id="liability-6">無形固定資産計</th>
    <td headers="liabilities liability-6">7,163,609</td>
    <th id="capital-1">資本金合計</th>
    <td headers="capital capital-1">10,000,000</td>
</tr>
<tr>
    <th id="asset-7">投資その他の資産合計</th>
    <td headers="assets asset-7">18,205,477</td>
    <th id="capital-2">利益剰余金合計</th>
    <td headers="capital capital-2">184,031,570</td>
</tr>
<tr>
    <th id="asset-8">固定資産合計</th>
    <td headers="assets asset-8">61,704,020</td>
    <th id="capital-3">純資産合計</th>
    <td headers="capital capital-3">194,031,570</td>
</tr>
<tr>
    <th id="capital-4"><strong>資産合計</strong></th>
    <td headers="capital capital-4">354,449,790</td>
    <th id="assets-capital"><strong>負債・純資産合計</strong></th>
    <td headers="assets assets-capital">354,449,790</td>
</tr>
</tbody>
</table>

CMS大阪夏祭り2016 にて「オーサリングツールとしてのCMSとWebアクセシビリティ」というタイトルのセッションを持たせていただくことになりました。地元大阪で話す機会が最近あまりなかったので、ほぼ1年ぶりですね。

CMS大阪夏祭りビジュアル

去年も「祭り」のつくイベントにいくつか参加させていただいてお話させていただいたのですが、今年もお話します。お祭り男と呼んでください!

会社設立からもう13年、ずっとwebアクセシビリティのことに取り組んでいたんですけど、CMSを事業の中心に据えてからまもなく10年、ATAG(Authoring Tool Accessibility Guidelines (ATAG)) 2.0についても自分自身、再度見直す機会になればと思っています。

また、少し前になりますが、AccSellのポッドキャストに呼んでいただきまして、ツール屋目線でのwebアクセシビリティ語りをさせていただく機会をいただきました。参加いただく方は時間があれば(早送りででも)ざっとお聞きいただければバックグラウンドなどわかっていただけるかもしれません(長いですがw)。

アルファサードでは社内イントラで Xtalk を利用して情報共有を図っています。ま、これは YammerChatter みたいなもんと思ってもらえればいいです。

で、PowerCMSの導入が決まったとか、クライアントのサイトがローンチしたとか大口案件の検収が終ったとか新サービスリリースしたとかのニュースを #goodnews ハッシュタグを付けて投げているのですが、どうもここのところそれが中々定着しない。ただ、これがすごく大切なんだと私は思うのですね。少しその理由を書いてみたいと思います。

会社の空気が悪いニュースに支配されがちな理由

トラブルや問題発生ってのは共有されやすいものです。もちろん組織によるところも多いと思いますが、表立つ、立たないに関わらず「あの件が大変みたいやで」って情報は広がっていきやすい。悪いニュースに頭の中が支配されていると会社の空気がしんどくなるんですね。

良いニュースは共有されにくい

自己矛盾になりますが、ウチのような中小企業の場合、社員に危機感を持たせたり慢心を防ぐ意味から、あまり順調で好業績だよってしょっちゅういわなくなるんですね。どっちかと言えば「まだ目標に到達できていない」「計画までまだ上乗せが必要」というポーズをとることが多くなる。もちろん相当な好業績のときは別ですが、計画到達・未達かどうかはまだ蓋を開けるまでわかんないよ、ってときはそうなりがちです。

#goodnewsは意図的に、少し大げさなくらいに共有したほうがいい

なので、些細なことでも良いニュースは意図的、大げさなくらいに共有、拡散していくといいです。個人でも会社でもそうですけど、良いニュースを積極的に共有しているときは会社の雰囲気っていいんですね。ウチの会社では PowerCMSが軌道に乗り始めた頃は、1導入決まるたびに(その頃は #goodnews ではなく「ワショーイ」発言だったw)共有されてました。ただ、慣れてきちゃうんですね。 なので、そういうの、心がけた方が仕事楽しいよ、っていう話しでした。

リッチテキストエディタの是非は別にして、リセットしたいなら局所化しとけよと思ったんだけど、これ普通なんか?エンジニアに必要なのは「想像力」でなはいだろうか?ウェブアクセシビリティ然り。自分の書いたコードがどんな使い方をされるのかを想像できない人はこの仕事向いてないと思うんだが。普通なのかこれ?

html, body, div, span, object, iframe /*略*/ {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

リセットされたスタイル。構造が視覚的に把握できない

MTSetVarBlock - テンプレートタグリファレンス

このブロックタグで囲んだ内容を値にした変数を設定します。このタグの中ではテンプレートタグが利用できます。変数を呼び出すときは、MTGetVar, MTVar ファンクションタグを使います。

MTSetVarTemplate ブロックタグとの違いは、囲んだ内容が処理された結果が値となるか、囲んだ内容が処理されずテンプレートのまま値となるかです。MTSetVarBlock ブロックタグでは囲んだ内容が処理された結果が値となります。

設定した値は $name_foo として、モディファイアの値としても利用することができます。

MTSetVarTemplate - テンプレートタグリファレンス

このブロックタグで囲んだ内容を値にした変数を設定します。変数を呼び出すときは、MTGetVar, MTVar ファンクションタグを使います。

MTSetVarBlock ブロックタグとの違いは、囲んだ内容が処理された結果が値となるか、囲んだ内容が処理されずテンプレートのまま値となるかです。MTSetVarTemplate ブロックタグでは囲んだ内容が処理されずテンプレートがそのまま値となり、MTGetVar, MTVar ファンクションタグで呼び出されたテンプレートで処理をおこないます。

使いどころが良くわからない的な話しがあるようですが、ひとつわかりやすい例を。

ナビゲーションブロックの組み立てのための Loop 系タグの呼び出しを1回にまとめる

グローバルナビ、サイドナビ、フッターの3カ所に MTTopLevelCategories が使われているとします。良くある話しですよね? でもHTMLの形は違うと。

ワイヤーフレーム

この時、MTTopLevelCategories の呼び出しを一回にまとめたい。だってその方が速いし。カテゴリが多く、テンプレートに MTTopLevelCategories が3回も4回も呼ばれてるケースなら相当速くなりますよ。

以下のようにすればループは一回で済みます。モジュール化して呼び出すときはキャッシュに注意ね。キャッシュされたテンプレートは(キャッシュヒットすると)評価されないので変数にセットされません。

<mt:TopLevelCategories>
<mt:SetvarBlock name="カテゴリリスト・グローバルナビ">
    カテゴリリスト・グローバルナビのMTML
</mt:SetvarBlock>
<mt:SetvarBlock name="カテゴリリスト・サイドナビ">
    カテゴリリスト・サイドナビのMTML
</mt:SetvarBlock>
<mt:SetvarBlock name="カテゴリリスト・フッタナビ">
    カテゴリリスト・フッタナビのMTML
</mt:SetvarBlock>
</mt:TopLevelCategories>
# 呼び出し
<mt:Var name="カテゴリリスト・グローバルナビ">
<mt:Var name="カテゴリリスト・サイドナビ">
<mt:Var name="カテゴリリスト・フッタナビ">

もし各ブロックのHTMLの違いが一部である場合、例えば下記のような場合は MTSetVarTemplate の出番です(class名だけが違うなど)。

<mt:SetVarTemplate name="カテゴリリスト">
    <mt:SubCatIsFirst><ul class="<mt:Var name="nav_class_name">-list"></mt:SubCatIsFirst>
    <mt:If tag="CategoryCount">
    <li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
    <mt:Else>
    <li class="widget-list-item"><$mt:CategoryLabel$>
    </mt:If>
    <$mt:SubCatsRecurse$>
    </li>
    <mt:SubCatIsLast></ul></mt:SubCatIsLast>
</mt:SetVarTemplate>

<mt:TopLevelCategories>
    <mt:Var name="カテゴリリスト" nav_class_name="gnavi" setvar="カテゴリリスト・グローバルナビ">
    <mt:Var name="カテゴリリスト" nav_class_name="snavi" setvar="カテゴリリスト・サイドナビ">
    <mt:Var name="カテゴリリスト" nav_class_name="fnavi" setvar="カテゴリリスト・フッタナビ">
</mt:TopLevelCategories>
# 呼び出し
<mt:Var name="カテゴリリスト・グローバルナビ">
<mt:Var name="カテゴリリスト・サイドナビ">
<mt:Var name="カテゴリリスト・フッタナビ">

ちょっと自分でもわかりにくいのを先日書いてしまったので懺悔の意味で書いた。後悔はしていない。

2015年は東京へ居を構えたことを始め、2オフィスの移転、MT Commerce の事業譲受、会社初のクラウドサービスのローンチ、人材の採用、W3C への加盟、経営理念策定とVIの刷新を行ないました。投資フェイズと考えて一気にことを進めましたが、うまくいったこともあり、いかなかったこともあり。

アルファサード ロゴ Improve the Web

例えば企業の B/S を見る時に「誰の立場でそれを見るか」という視点が必要です。 以前、CSS Niteではこの図を例に出して「すぐに出ていかないお金が多くを占めて早く現金化できる資産の多いBが望ましい」という話しをしました。

AとBどちらのB/Sが優秀か?

確かにBの経営は安定しているのは事実でしょう。銀行視点ではこれが正解です。ところがAの決算書の左下に注目すると見方が変わってきます。つまり、将来の利益を生み出すためにその会社は何に投資をしたのかが表れてきます。つまり、どういう視点で見るかによって正解は違うのです。

去年の我々の事業で言えば、オフィス移転(引越し代は経費だけど、内装費などは資産に計上される)、事業の譲受といった費用はB/Sの左下に入ります。つまり、アルファサードがやろうとしていることは Bから Aへ近づけて(もちろん大勢に影響はない範囲ではありますが)、より成長を目指して活動したということになります。

何故、仕事力か

結果的に去年は一昨年やそれ以前よりも多くのリソース、ヒト、モノ、カネをつぎ込んだにも関わらず、自分の目指すゴールには届きませんでした。結果、昨年の後半に自分で巻き返すために現場仕事を数多くこなしたのですが、ここにヒントがありました。結局、経験やスキルや仕事をうまく進めるメソッドは人数やお金に勝るということ。仕事力には「製品力」も含みます。もちろん PowerCMSや MT Commerceがもっと売れるに越したことはないですが、ここでいう製品力とはもっと違うもの。PowerCMSや MT Commerceを選択していただいたパートナー様やクライアント様をハッピーにするための総合力ということです。

  • PowerCMS を選択したはいいが、カスタマイズが思うように行かない
  • 想像以上のコストや時間がかかってしまった
  • カスタマイズしすぎてメンテナンス性が低下してしまった
  • 結局スキルが追いつかなくて手戻りを繰り返し方針変更を余儀なくされた

サポートを売りにして一定の評価を得たと思ってはいるものの、今一度そこを見直さなければ伸びていけない。これは、社内だけでなく、PowerCMSのパートナー様や MTコミュニティの皆さんと一緒に取り組んでいきたい。コミュニティ全体が「仕事力」を磨くことでソフトウェアは強くなるんだと思うのです。これらはリリーススケジュールの遅れなんてことにすぐ繋がる。

そのためにひとつ、宣言を

今年は本を書きたいと思います。出版という形をとるかどうかは別にして、これまでの自分のノウハウ、経験からくるベスト・プラクティスを後進に伝達しなければ後継者のいない職人になってしまう。なので、ハンズオンのためのテキストになるかもしれないし、書籍になるかもしれないけれど、書いてみたいと思っている。

今年は、あたりまえだと思っていたことに疑問を持つ一年に

以下のエントリ等で書いたように、現場にガッツリ入ることで仕事改善のたくさんのヒントがあります。

世の中には二通りの人がいます。

  • 常識を疑わないひと
  • 常識を疑ってかかる人

これまであたりまえのように、この機能を実装するのには何日かかるとか、MTでの構築だとこうやるのがセオリーとか、そういう殻を破っていかないと先はないということです。

最後に当社の経営理念の中、行動指針から、僕の好きな言葉を

  • 常識にとらわれずに他者と違うやりかたを模索せよ。不可能を可能にするために考え抜け。変化を好み、楽しめ。
  • 常に小さなイノベーションを起こせ。小さなイノベーションの積み重ねこそ、我々の成長のエンジンである。

KeynoteScreenSnapz001

この記事は Movable Type Advent Calendar 2015 の最終日の記事です。

いや、今年も色々ありましたが実は地味に今年のトピックは Movable Type でテンプレートをフル実装する機会に恵まれたことですね。自分のブログ以外ではそんな機会はこれまでなかったのです。しかも PowerCMS じゃありません。予算の関係もあり、今回は Movable Type で行きましょう、ということになったのです。

本題に入る前に少し MTDDC の続きを

日本語変数名の使いどころ

日本語変数名の話しを少ししたよね。実際に有用なシーンに出会ったので紹介しておく。多言語サイトで。

<mt:BlogLanguage setvar="language">
<mt:If name="language" eq="ja">
    <mt:Setvars>
        サイト・パス=/jp/
        ホーム=ホーム
        最新ニュース=最新ニュース
        関連ニュース=関連ニュース
        年度=年度
        キーワード検索=キーワード検索
        サイト内検索=サイト内検索
    </mt:Setvars>
<mt:Else>
    <mt:Setvars>
        サイト・パス=/en/
        ホーム=Home
        最新ニュース=Latest News
        関連ニュース=Related News
        年度=Fiscal
        キーワード検索=Keyword Search
        サイト内検索=Search
    </mt:Setvars>
</mt:If>

<h1><mt:Var name="キーワード検索"></h1>

超わかりやすくないですかい? <mt:Var name="keyword_search_title"> みたいにわざわざ指定する必要ないんだから。同じテンプレートで行けるし、わざわざたくさんのカスタムフィールドを作る必要もない。比較や変数渡しの必要がなければ日本語でOK。

SetVarTemplate の使いどころ

Movable Type Advent Calendar の初日で BUNさんがちょうど書いていましたが、function(関数)のような形で使いまわしできるのがこのタグの良いところです。

複雑な分岐ロジックでなくとも、以下のようなテンプレートを直に分岐等を入れながら書くと、コーディングに修正が入った時の修正箇所が多くなります。

<mt:SetvarTemplate name="breadcrumbs_tmpl" note="パンくずのマークアップ">
<mt:Unless name="no_image"><img class="breadcrumb" src="/assets/img/common/breadcrumb.png" alt=""></mt:Unless>
<mt:If name="breadcrumbs_url">
<a class="breadcrumb" href="<mt:Var name="breadcrumbs_url">">
</mt:If>
<mt:Var name="breadcrumbs_title">
<mt:If name="breadcrumbs_url"></a>
</mt:If>
</mt:SetvarTemplate>

<mt:Var name="breadcrumbs_tmpl" breadcrumbs_url="$url" breadcrumbs_title="$title">

(※コーディングがどうとか言うなよ。俺が書いたんじゃねーんだ。) 要するに、URLとタイトル、画像の有無を渡せばパンくずのマークアップで出力できるというもの。

ここから本題。やはりお前らのMTは間違っている!

タイトルは釣り本気ですが、おおまかなテンプレート構築のフローを書きながらどんな風に作ったのかご紹介しつつ、何が間違っているのかについて考えていきましょう。

※ここで紹介したツール群は、年始に PowerCMS およびそれ以外の方法で(単品やクラウドサービスなど)でご提供する予定です。一部については既に公開しているものもあります。

コーディング素材を受け取って、MTのテンプレートに登録する

まず、制作会社から上がってきたコーディングデータと画像等の素材一式をMTのインデックステンプレートやアイテムに登録します。いくらなんでも自分でチマチマやるのは何なので、新人のデザイナーに「ここからこうやって登録...」といいかけて思ったのです。ハッ! いくら新人でもこんな単純作業に時間を割かせて良いものだろうか。今回の案件ではコーディングに SSIを利用していました。公開サイトでは動的なしくみは使えない制約があったので、ま、MTIncludeにすればええやと思いつつ...

納品されたコーディングデータ素材

とりあえずプラグインを作るところから始めました。でき上がったのがこいつです。

共通アイテム登録画面

ZIPファイルに素材を固めて管理画面からアップロードすると拡張子によってテキストファイル系はテンプレートに(インデックスか、テンプレートモジュールに)、画像等はアイテムに(@commonタグ付きで)登録してくれるものです。インクルードファイルをモジュールに、インクルード元ファイルをインデックス・テンプレートに登録すると、ちゃんと MTIncludeに変換してくれるんですぜ。

テンプレート編集画面の不便いろいろ

これはもう色々あるんですが、最初に大きな声で言っておきたいのは「お前ら声が小さい」「お前ら文字が小さい!」。デフォルトのフォントサイズは14ポイントです。で、これ設定とかで変えられません。アクセシビリティを何だと思ってるのか。年寄りを何だと思っているのか。

ということで次に作ったのがこいつです。ついでに最新の CodeMirror を入れてキーバインディングやスキンを変更できるようにしました。で、僕は MTのテンプレートにおいては「行を折り返す派」です!

テンプレート編集の設定

どうです? 見やすくなったでしょ?

改良後のテンプレートエディタ

次に手をつけたのはウィジェットとメモ欄です。メモ欄のことは MTDDCで話したので今日は詳しく触れませんが、ここ ( alfasado/mt-plugin-template-note ) からダウンロードできます改良されたテンプレート編集画面

しかしそれよりも何よりも「インクルードテンプレート」ウィジェットがあるのに「インクルードされているテンプレート」ウィジェットがないじゃん!

ということで次にこれを作りました。全テンプレートをロードするのでこれ、非同期読み込みです。ええ、これ書くために jQuery 勉強したんだぜマジで。

リンクされているテンプレートウィジェット

これで完璧だよね、とか自己満足して作業進めてたらそれでも足りない何かに気づいたのです。グローバルテンプレートへの移動が不便! そんなこともあろうかと、こいつ ((MT5)ユーザーダッシュボードに左メニューを追加する。 - Junnama Online) を入れておいたのです。でれでもテンプレート編集してる時だし移動したいのは。ということで、次にこれ作ったのさ。テンプレートをブックマーク保存できて、一覧画面、編集画面の右側のウィジェットに表示されるように。

ブックマークウィジェット

グローバルテンプレートの改良

(追記)グローバルテンプレート嫌いな人いるよとなんてうだけど、多言語サイトの共通テンプレートとかどこかのブログに置くのも気持ち悪いし、ブログIDが開発と本番で変わることってざらにあるのだからやはりそういうのはグローバルテンプレートが素直だと思う。ウェブサイトの配下にブログって手もあるけど、ひとつのサイトなのにブログ数が多いのってスマートじゃないと思う。いろんな意味で。(追記ここまで)

Twitter 検索してみたら色々出てくるじゃん。

あれ、途中からリビジョンの話しになったよ。グローバルテンプレートにはリビジョンがない。

2015年ですぜこれ。MT Studioで対応してたので、そいつを切り出して移植。ついでに Diffを見られるようにした(グローバルテンプレートに限らない)。

グローバルテンプレートのリビジョン対応

続いてこれ。

これ見たの、東京から新大阪へ向かう新幹線の中。京都に着いたあたりで見たんだよね。で、新大阪に着くまでにかけるやろかと思って、書けた。

シェルで、また敷居が高いとか何とか、ちゃんとUIも作っといた。

テンプレート一覧画面から実行できる

てか、そもそもテーマが当てられた時にリビジョンが保存されるようにしておいた。

これもなぁ。。。多分MT4で導入された MTInclude多様のテンプレートでページの先頭に空行たくさん入る問題の解決のためなんだろうが、これこそ安易な解決をするな、の好例だと思う。これについての対処としては、コメントタグを先頭に入れて正規表現で置換と言う美しくない解決を(今回は)した。

納品ドキュメントを作りやすく

乗ってきたのでついでに作った。というか上半期末の全社会議での社員の発表で話題に上がっていたので作った。テンプレートに「メモ」を付けておけば、それを含めて一覧に表示してくれる。HTMLで生成したけど、PDF化すればいいんじゃないかと(CSVも考えたけどこっちのほうが現実的っぽかった)。

テンプレートの納品ドキュメント

いい加減疲れてきた。他にも色々作った。他の Advent Calendar に書いたネタ( Authoring Tool Accessibility Guidelines の観点から CMSの画像挿入フローを検証する - Junnama Online )ですが、リッチテキストエディタと画像挿入のところを何とかしたくて リッチテキストエディタ及びエディタへのアイテム挿入に関する機能を拡張する Advanced Editorというプラグインを作った。

だいたい、記事編集画面の title要素は何だ ?

この画面キャプチャ見て何とも思いませんか?

記事編集画面の title要素が不適切。全ての記事で「記事の編集 - ブログ名 - ソフト名」となっている

アクセシビリティもそうだし、そもそもウィンドウやタブをいっぱい開いて作業してる時に何が何だかわかんないと思うんだがこれ、いつからなの? 誰も指摘しなかったのだろうか。プラグイン書いといたので、ご自由に使ってください。

ヒントは現場に転がっているし、声を上げることがコミュニティへの貢献に繋がる

このエントリで言いたかったことは、まさにこの一文なのです。MTQ でも FogBugz でも日本語でもOK。お前ら本当に Data APIが欲しかったの? いや、 Data APIが駄目だとか言ってるわけではなくて、普段 Movable Type 乗りまわしてるのってテンプレート、サイト構築してる我々じゃないか。何も考えずに目の前の仕事を進めるのではなく、考えるヒントは日常の仕事の中に転がっている。“事件は会議室で起こっているんじゃない、現場で起こってるんだ” ってことを再認識した師走の午後でした。

それでは、メリークリスマス、良いお年をお迎えください。

MTDDC で話してきました。

セッション中の私ー

MTでのCMS構築案件で皆あれこれ工夫しているというのは理解できるのですが、傾向として結果として見通しの悪いテンプレートになっているケースを目にすることが最近増えてきたように思います。理由はいくつかあると思うのですが、以下のようなことではないかと思います。

  • 案件の規模が大きくなり、顧客の要望が増え仕様が複雑になってきている
  • 実装者のスキルが上がってきており、複雑な要件もMTMLで実現できるようになってきている

後者は良い傾向であるともいえますが、結果として初心者が修正できないテンプレートになったりしては本末転倒かと思います(場合によっては上級者でも他人のテンプレートがわからないといったケースも)。

一例を挙げます(実際はもっと多岐に渡り複雑なケースが散見されます)。

<mt:Entries<mt:If name="want_filter"> field.foo="1"</mt:If>>
...
</mt:Entries>

上記のような書き方をしたいが、できないので色々と工夫しているということでした。以下の例では IF文を一度評価した後で decode_html して再度 mteval でビルド しています。

<mt:For decode_html="1" mteval="1">
&lt;mt:Entries <mt:If name="want_filter">field.foo="1"</mt:If>&gt;
...
&lt;/mt:Entries&gt;
</mt:For>

また、下記のようにビルド結果のテキストを置換して再度ビルドするというテクニックを使っているというケースもありました。

<mt:setVarBlock name="search1">/<lz:/g</mt:setVarBlock>
<mt:setVarBlock name="replace1"><</mt:setVarBlock>
<mt:setVarBlock name="replace1" append="1">mt:</mt:setVarBlock>

<mt:setVarBlock name="search2">/<\/lz:/g</mt:setVarBlock>
<mt:setVarBlock name="replace2"><</mt:setVarBlock>
<mt:setVarBlock name="replace2" append="1">/mt:</mt:setVarBlock>

<mt:For regex_replace="$search1","$replace1" regex_replace="$search2","$replace2" mteval="1">
    <lz:Entries <mt:If name="want_filter">field:foo="1"</mt:if>>
        <lz:If name="__first__"><ul></lz:If>
        <li><lz:EntryTitle></li>
        <lz:If name="__last__"></ul></lz:If>
    </lz:Entries>
</mt:For>

やりたいことは実現できているのですが、以下の課題が残ります。

  • 管理画面のテンプレート検索で目的の箇所がヒットしない
  • decode_html のパターンでは、HTML(デザイン)の修正時に修正が困難
  • やりすぎると見通しが悪くなる
  • replace のパターンでは文字列「

DOMDocument プラグインを利用すれば、以下のように書けます。

<mt:getElementById id="tmpl_foo" setvar="tmpl_foo">
<mt:removeAttribute name="id" node="tmpl_foo">

<mt:If name="want_filter">
    <mt:setAttribute node="tmpl_foo" attr="field.foo","1">
</mt:If>

<mt:Entries id="tmpl_foo">
...
</mt:Entries>

まず、1行目で MTgetElementById タグで MTEntries ブロック(Node)を取得して変数 tmpl_foo に格納します。 2行目で、MTEntriesブロックから id モディファイアを削除しています。idモディファイアがあると entry_idでのフィルタリングがかかってしまうためです。その後、 MTIFタグで want_filter に値がある時、MTsetAttribute タグで field.foo=1 を追加します。

MTEntries に id 指定しなくても、以下のようにタグ名と index (n番目=1番目は「0」)指定で取得することもできます。

<mt:getElementsByTagName tag_name="Entries","0" setvar="tmpl_foo">

また、何をやっているかをわかりやすくするために GetHashVar プラグインの note モディファイアを使ってコメントを該当タグの中に直接記載することができます(そもそも存在しないモディファイアは無視されるので、プラグインがなくてもこう書けます)。

<mt:getElementsByTagName tag_name="Entries","0" setvar="tmpl_foo"
    note="1番目の mt:Entriesタグにカスタムフィールド 
    foo によるフィルタリングをかける">
<mt:If name="want_filter">
    <mt:setAttribute node="tmpl_foo" attr="field.foo","1"
    note="want_filterが1の時フィルタリング">
</mt:If>

<mt:Entries id="tmpl_foo"
    note="DOM操作でフィルタ指定対象のブロック">
...
</mt:Entries>

ま、スライド見ていただければ言わんとするとことはおわかりいただけるかと思いますが、この手の話しならこれからいくらでもするからな! これからは間違うなよ!

セッション中に紹介したプラグイン

アルファサード

ま、あれこれやってることはバレて? るわけなんですけど、今「第3の創業」という心意気であれこれやっとるわけです。ものすごく働いててものすごく動かしてるってのは、ウチの社員にでも聞いていただければわかると思います。

  • 求人広告出稿(欠員の募集)
  • 全社員との個人面談、ユニットリーダー制への移行説明とリーダー候補者への打診
  • 新サービスに必要なモジュール開発、テスト
  • 経営理念、行動指針、理念の策定
  • 短期・中期経営戦略の検討
  • 人事評価制度の導入決定、人材会社への打診、外部顧問の招聘
  • オフィスの移転決定
  • 戦略の策定、戦略遂行後のあるべき、ありたい姿のイメージ化
  • 東京に居を構えることを決定(部屋を借りて住み始めた)
  • 銀行への協力依頼(パートナーの紹介依頼ほか)
  • 求人方針の変更、面接、数名の採用
  • ソフトウェアチームへの課題出しと、アイデア・ミーティングの実施
  • 新事業のパートナー選定
  • 外部協力先との新サービス、製品開発プロジェクトの始動(複数)
  • M&Aを含む戦略的パートナーの募集、M&A会社への打診、面談(企業買収もしくは業務提携先の募集)
  • 商談にて新サービスの提案開始
  • 新製品のリリース延期、ユニットリーダーへの権限移譲、予算化
  • 組織図の作成

ざっと挙げるとこんなことをやったのですよ。僅か2ヶ月です。で、何でこんなに加速することができたのかについて少し書いてみたい。

組織変革のビジョン

昨年の末から色々と本を読みあさっていたのですが、その中の一冊に「組織改革のビジョン」という本があります。帯の台詞が中々いいところをついているのでご紹介したい。

忙しいから絵(ビジョン)が描けないのではなく、描けないから忙しいだけだ

ね、このひと言が全てを語っているような気がする。ビジョンがないから目先の仕事に言い訳し、大切なことを後回しにしてしまうのです。そして、ビジョンを描いたら忙しくなくなるか、といえばそんなことはないわけですが、大切なことは、忙しくても本来やるべき仕事を後回しにしなくなるということです。そして、忙しくても平気になるのです。

計画のグレシャムの法則〜悪貨は良貨を駆逐する〜

グレシャムの法則「悪貨は良貨を駆逐する」を計画にあてはめたもので

「ルーチンの小さな計画が節目で描くべきより大きな計画を駆逐する」というのがその内容になっている。これを「計画のグレシャムの法則」というのは、元々のグレシャムの法則の貨幣を計画に置き換えた形になっているからだ。

我々のように特にクライアントワーク、受託の広告(Web)制作事業やソフトウェア事業をやっていると、お客様第一の錦の御旗の元に、目先のお客様の依頼事項を言い訳にして自分の大きな目標、それは仕事であっても個人のスキルアップでも何でもいいのですが、そういうのが後回しになってくる。口をついて出るのは「忙しい」「時間があったらやりたい」です。

ビジョンを描き、明文化し、宣言する

そんな時にはまず、ビジョンありきと考えるべきです。日頃の小さな計画の延長に未来があるわけではなく、まず、未来のあり方を描くのです。上記のアルファサードの経営理念の中の一節に「成長を続けながらも変化をいとわず、3年単位でまったく違う景色を見ている会社であり続ける。」というものがあります。3年後に違う景色を見ているために、今までの仕事のやり方でいいか? 良くないです。まずこれを定めてしまい、宣言します。宣言することで退路を絶ってしまう。サイトで公開するだけじゃなくて、わざわざFacebook広告まで打ちました。経営理念のページへ誘導するFacebook広告って売上に直結するわけないのですが、成長のためには強い人材と、パートナーとの関係性構築・強化が不可欠です。弊社は有名か? BtoBの企業がそんなに有名な筈ないです。ブログも書いてる、セミナーもやってる、ソーシャルメディア活用してる、それでちゃんとターゲットにリーチできているか? できてないですまだまだ全然。伝えたつもりになっているだけです。

よく、ウェブページでもパンフレットでも企画書でも「これを謳っておけ」というと、「ここに書いてあります(企画書の隅とか補足チックに確かに書いてある)」とか言う人がいます。目に飛び込んでこないもの、印象に残らないものは「書いてある」だけで「伝える努力が足りない」と考えるべきです。それこそがクリエイティブってもんでしょう。

戦略は、ワクワクするようなストーリーとなっているか

ビジョンが描けたらビジョンを実現するための「短期」の戦略を立案します。戦略は長くて2年、可能なら1年単位で考えます。戦略で大切なのは「風が吹けば桶屋が儲かる」的なストーリーが描けていることです。

※(追記)若干例えが適切でなかったかも。「可能性の低い因果関係を無理矢理つなげてできたこじつけの理論・言いぐさ」を指すことも多い。←では駄目ですよ。他社が気づかないが(もしくは他社の資産では実現できないが)当社なら実現可能で理にかなった明快なストーリーが必要です。

  1. 大風で土ぼこりが立つ
  2. 土ぼこりが目に入って、盲人が増える
  3. 盲人は三味線を買う(当時の盲人が就ける職に由来)
  4. 三味線に使う猫皮が必要になり、ネコが殺される
  5. ネコが減ればネズミが増える
  6. ネズミは桶をかじる
  7. 桶の需要が増え桶屋が儲かる

以前、取材を受けた時に「プレスリリース・ドリブン」の商材開発という話しをしました。今から考えると、これでは不十分で、この段階では「話題になるかどうか」というところまでにしか意識が至っていない。なぜ売れるのか、誰が、なぜこれを買うのか、もしくは誰が、なぜこれを売るのかというところまでスッキリと腑に落ちるストーリーまで落とし込まなければその戦略は実現しません。そこが腑に落ちたとき「計画」は実現可能なワクワクするものとなるのです。

実行には「投資」を伴うようにする

もう一点、可能であればそれを宣言するだけでなく、お金やリソースといった投資を伴うものにすることが大切だと思います。Facebook広告なんて安いものですが、オフィスや住居は決めたら短期前払い金で処理することにして全額払ってしまいました(オフィスのほうは今月処理)。社内のリソースが足りなければパートナーを募集して契約を締結し、お金をかけることを決定します。そうすることで「後に引けない状況」を作る。つまり、退路を断つのです。ここまでできれば、あとは突き進むのみとなります。

そこが明確であれば、時間はさほど問題になりません。時間がなければコストを突っ込んででもやる。そうやってスピードを上げて行きます。

最後に、アルファサードでは引き続き戦略的提携パートナーを募集しています。

宜しくお願いします。

冒頭に告知。アルファサードでは人材を募集中です。

アルファサードの純資産の推移

V字回復の経営―2年で会社を変えられますか (日経ビジネス人文庫) 読了しました。本の存在を知ったのはこちらの記事です。あわせてどうぞ。

まず、前提としてウチの会社は赤字ではないし業績が悪いわけでもないのですが、つまり、V字になる必要もないのですが、是非読んでみたいと思って。アルファサードで組織改革をしていきたいと強く思っていて昨年末から絶賛実行中だからなのです。具体的なメニューとしては、人事考課制度づくり、チーム(事業部)制の導入、幹部候補含む人材の採用と育成、これらを通じて収益力の強化、経営基盤の安定化といったことを計画・実行していくのですが、根本的なところというか、目指すところは「風土改革」なんですね。「強烈な個性を持ったオーナー創業者」の色を薄め、自立した組織、社員自らが考え、成長する組織を目指します。

標題の本は大企業の実話を元にしたリアルなフィクションで、物語として読んでも楽しめるものです。サラリーマンもの、会社モノ、半沢直樹シリーズなんかが好きな人であればそういう面でも楽しめるストーリーだと思います。

まぁ、この本には自分が読んでも痛いと感じる言葉が並んでいます。

しかし社員が社長と一緒になって考えてくれるなどというのは幻想にすぎない 。社長こそが新しい考え方を模索し 、それを提示し 、そして社長が自ら行動しなければ 、何も起きないのだ 。
組織の危機感を高める経営手法は 「危機感が足りない 」と叫ぶことではない 。経営風土を変える経営手法は 「風土改革をしよう 」と叫ぶことではない 。社員の意識を変えるために 「意識改革をしよう 」と叫んでも意識は大して変わらない 。
組織カルチャ ーの変化は必ず 、組織内で起きる 「事件 」 (大きな出来事 )を触媒にして進展する 。事件を避け 、なるべく静かに 、無難にことを進めようとする経営者や管理職では 、その組織文化を変えることはできない 。

そう、「事件」を起こそうとしています。自分自身が先頭に立って。改革は何も業績が悪い時に行わなくても良いではないですか。業績が良いときにこそ「事件」を起こして改革していこうというのが俺の頭の中です。

さて、総勢十数名にすぎない中小企業にこの話しを当てはめられないかというと全然そんなことはなくて、やることは同じです。そして、この本に分類されている以下の分類。そう、改革には多少の痛みを伴うのです。

  • 改革先導者
  • 改革追随者
  • 改革抵抗者
  • 人事更迭者
  • 傍観者(外野席)

私はこの数年「人が辞めないことを是」として経営してきました。業種業態、規模を考えると退職率の低さ、定着率の良さは誇って良い数字だと思います。ただ、そのことによる弊害も目につくようになってきたと感じています。

「多少の痛み」というのは、大きく2つ。ついてこれない、もしくは賛同できないが故に脱落者が出る可能性、一時的な業績の落ち込み。これまでとにかく人の入れ替わりがなく、攻めの営業を貫いてきたトップが、社内の制度改革、組織改革、そして、階層のないフラットな組織だったものをチーム(事業部)制への移行にエネルギーを向けるわけですから、売上はともかく、これまでよりコストのかかることをやるわけですから、一時的には利益が減少する可能性がある。

それでも、次の5年、10年を戦うためには今これをやらなければならないという強い危機感と信念があります。そのためには、傍観者(外野席)をどれだけ改革先導者、改革追随者に持っていくか、+改革者は外からやってくる(この本に何度か繰り返しでてきます)=積極的な外部の活用(新たな人材採用含めて)がキーになると考えています。

本気で仕事に取り組むことの意義

「何となく惰性で仕事をしてそこそこの給料貰ってそれでメシ食えればいいし、会社が駄目になれば転職でもすればいいか」とか思って仕事をしていて会社が継続できるほと世の中は甘くありません。また、本気でこの会社でキャリアを全うしようと言う人からすれば、このような考えの人と一緒に働きたくないでしょう。あたりまえのことなのですが、放置しているとこういう考えの人が会社に巣くうようになってきます。私は「なぜ働くのか」みたいな哲学的な問答に明確に答えられるようなできた経営者ではありませんが、サラリーマンであれ起業家であれフリーランスであれ、本気で仕事に打ち込む幸せを体験できない人は不幸だと思います。人間的な成長、自信、そして収入を上げていくこと、生活基盤を安定させていくことに疑問がありますか?

新たにスタートする従業員持ち株制度なんかは、実際にやりがいというより現実に稼いでもらおうということで導入します。本気には本気で応えたい。

重要なのは働き方であって、仕事量ではない

誤解して欲しくないので一応書いておきます。決して「もっと働いてくれ」ということではありません。強いて言うなら「もっと、こういう働きかたをして欲しい」でしょうか。目先のノルマの達成のために、個々人の仕事量を増やして対応することは馬鹿げています。疲弊し長続きしないだけでなく、将来性がない。限界がすぐにやってきます。重要なことは、労力の向け先をどう変えていけばよいか、つまり収益の仕組みを変えていくことです。どこに向かってエネルギーを投入していけばいいのかを明確にし、一体感を持って仕事ができるようにすることです。アルファサードは6、7年前に一度体験しています。社員の年収が数十%向上したあの時のことです(これは今いる社員のうち経験した人のほうが少ないわけですが)、あれをもう一度体験しようと言っているのです。

求める人材像

こう考えると、欲しくない人材ははっきりします。現状の職場への不満が転職のきっかけであれば、そういう思考の人は欲しくないと思えてきます。どんなに優秀な人であっても。幸いにも、特に募集職種のうち、ディレクターや幹部候補については、属人性の少ない、つまりその人のセンスやスキルに関わらず利益の出しやすいモデルを当社は持っています。特に営業しなくても仕事の依頼がくるところ、自社製品を元に組み立て、出荷する(受託業務における納品)ことを覚えれば未経験者でも3ヶ月で1案件でも経験すれば十分でしょう。陳腐化された言い方かもしれませんが、絶対的にマインド重視です。異業種でも構わないとさえ思います。エンジニアだけは別ですが、それでもマインド重視に変わりはありません。マインド重視ってのは、例えばこのエントリを読んで、「それ、面白そうじゃないか」とか、俺(野田)と会ってみたいとか、一緒に仕事してみたいというところです。

募集広告って「ウチの会社こんなにいいですよ」というアピールするもんじゃないですか普通。でも、創業10年ちょっと、社員数十数名の中小企業って、できあがった完成品じゃないんです。今の時点の会社の良さ(いい会社だと思っていますよもちろん)だけを見て、そこに乗っかろうという人を採用しても駄目だと思うし、これから1年、3年、5年で大きく成長しようと思っているのだから、近い未来においては成長後の会社で働いていることになるわけだから、それに相応しい人材と出会いたいではないですか。

アルファサードは11年前に私が一人で始めた会社です。その頃の無名な会社、その後2人、3人でやっていた時期にウチに応募しようという人のレベル感(人をレベルということに抵抗はありますが)と、今応募しようという人のレベル感は全然違う筈です。少なくとも採用に関する基準は会社の成長に伴い上がっていくのが普通です。でも、今後数年で急成長をしていくことが前提なのだから、成長後のレベルに相応しい人材を採用するか、自ら成長してレベルアップできる(少なくとも会社の成長と同じスピードで成長できる)人材でないと、その時点で下げ止まりになっちゃいませんか?

50歳以上しか採用しない会社の社長が言った、「人生の変え方」

直接この本とまったく関係ないのですが、Facebookで流れてきたこの記事。50歳以上しか採用しない会社の社長が言った、「人生の変え方」 | Books&Apps

こういうのって、実話なんだかどうかがわからないのですが(ソーシャルでシェア、拡散されるための作り話をよく目にするしね、最近)、でもまぁ書いてあることには共感できるのです。いや、別に50歳以上を探しているというわけではないのですが。

社長 「不思議ですか?普通に考えればそうですよね。でも、採用にはちょっとした基準があるんです。」

私 「どんな基準ですか?」

社長 「人生を変えたい、という人だけを採用しています」

社長 「一つ目、人生を変えるのは、一発逆転の出来事ではなく、些細な日常の習慣です。「続けること」そのものに価値があります。例えば、「早起きする」であったり、「通勤時間に必ず本を読む」でもいい。仕事も同じです。電話を毎日10本する、であったり、お客さんにこころをこめてメールを書く、でもなんでもいいです。とにかく、小さい習慣から人生は変わります。」
社長 「そのとおりです。そこで、三つ目、一つ挫折したら、次のものを設定する。無理して出来ないことを続けない。失敗は、それ自体がノウハウです。習慣には自分に合うものと会わないものがありますから、ムリはしない。重要です。先ほどの「電話をかけ続ける」という社員は、そこに辿り着くまでに二回ほど挫折していますよ。何かができない、ということについて、罪悪感を感じる必要は全くありません。「できないこと」がわかることは大事です。」

そりゃ、自分を変えたいと思っている人と働きたい。私自身が自分を変えたい。良い方向に。2年で引退できたらこの会社受けに行きたいくらいであるけど、いや、行けないのわかってんので自分の会社で実践したいと思うわけですよ。

要するにこれは、書評の姿を借りた求人エントリーです

応募はこちらのページから、熱いテキストとともにお送りくださいませ。

あけましておめでとうございます。

まず冒頭にアルファサードでは人材(エンジニア)を募集中です。宜しくお願いします。

2014年の年頭のエントリーを改めて見ていたのですが、最後の「One more thing. 投資すること。」だけ満点とれませんでしたね。それ以外はちゃんと書いた通りのことを全力で進めた1年でした。

さて、去年は去年で公私共に色んなことがあった一年でしたが、社内でのある出来事がきっかけで(一つの出来事というわけではなく複合的なことで)真剣にこれから5年、10年先のアルファサード株式会社を考えるということをしました。そして上期末(当社は6月決算)の全社会議で社員の皆さんに俺の頭ん中を話しました。

会社の見積もりをとってみた。

期末社内会議のスライド

まぁね、何て言うか去年の秋にM&A会社の人が面談申し込んできて、売る気がないことを断り入れた上で見積もりだけしてもらったんですね。ほぼ自分の予想通りの見積もりが上がってきて、やっぱりこんなもんかな、というお話だったわけなんですけど。

DCF方式ってのと、類似会社比準方式ってのをやってもらいました。検索すると出てきますね。

中小企業のM&A活用法 5.M&Aにおける企業価値評価 | 帝国データバンク[TDB]

企業価値の算出指標

ものすごくおおざっぱに言うと、純資産のうち、金にならない電話加入権とかそういうのを引いて、それに向こうn年(業界によって異なるそうです)の利益予測を乗せる方法(DCF方式)と、同一業種業態の上場企業の決算書等を集めて平均を出して、中小企業ディスカウントn%を掛け算する方法なんだそうです。多少の違いはあるけど、まぁ、良く似た金額が出るわけです。なので、リアルにこの金額は当社の現在の価値なんでしょう。

一昨年父親が亡くなったってことも考えるきっかけになったんですけどもね、で、これ、相続対象の資産なわけです。100%株主なので、俺。

従業員持ち株制度を始めることにしました。

上期末の全社会議でこの見積もりを社員に見せたわけです。もちろん見せる理由があって、見出しの通り従業員持ち株制度を始めることを考えていたからです。株式を2000分割して、勤続年数に応じてその時点の純資産を時価として取得でき、売りたくなったらその時点の時価で会社に買い戻して貰えるというものです。

純資産の経緯

この年利0.x%の時代に、過去の実績ベースでは利回り数十%の株式を持てるわけだから、とはいえもちろんリスク商品なわけで、それでも逆に当社は社員が10数名の会社なのですから個人の頑張りが業績につながるわけで、つまりはこれまでのワンマン経営から、経営に少しずつ参加いただきたいという思いからそうすることにしました。

中小企業とベンチャーの一番の違いは何か?

これでも11年ほど小さな会社をやってきてそれなりの成果を上げてきたわけですが、そのフェイズフェイズで視点の位置と言うか経験値というかそういうのが少しずつ上がってくるわけです。最近わかってきたことがあってね、「会社を継続することは簡単なことではないが、会社っていうのは、本当は始めるより畳む方が格段に難しい」という事実です。

中小企業の未来

少なくとも中小企業においては若くして会社始める時に畳み方考えて始める人ってどれだけいますかね? 上手く行くかどうかもわからない、期待もあるけど大きな不安を抱えて会社始めるわけです。それからは存続させる、利益を出し続けるために走り続けます。人も雇用し始める。

気がついたら10年も過ぎ、取引先数も従業員数も増えている。さぁどうすんだ、と。

残された時間は、長いようで短い。準備は早ければ早いほどいい。

去年は2014年は"エバンジェリスト・ドリブン。自ら動く、動かす年。"と言って事実その通り動いてきて新しいソフトウェアなどもリリースしました。ほぼ思い通りにコトを進めてきましたが、今年は逆を行きます。つまり、社長の属人性排除にかかる第一歩を踏み出す計画です。

2015年は「脱」"エバンジェリスト・ドリブン。"

内部向け取り組み課題

  • 増員、製品・サービス開発・リリースのスピードアップ
  • オフィスの増床(移転)
  • 組織化、人事評価の制度化
  • 従業員持ち株制度の開始

外部向け取り組み課題

  • PowerCMS 8341の拡販
  • SFA、CRM関連の新たなサービスの開発
  • クラウドサービスを開始
  • モバイル関連製品の開発

これ、全部俺が中心になってやります。2015年は「脱」"エバンジェリスト・ドリブン。"です。色々とお世話にならなければならない皆様も、従業員の皆様も、宜しくお願いします。本気の一年が始まります。

この記事は、Web Accessibility Advent Calendar 2014、4日目の記事です。

私の会社(アルファサード株式会社)で今年、PowerCMS 8341と Crawl という2つの ウェブアクセシビリティチェックツール を作りました(ColorTesterというコントラストチェックツールも作りました)。PowerCMS 8341 は Movable Type / PowerCMS のプラグイン、Crawl は OS X用のチェック機能を内蔵したブラウザです(非公開)。
すべてのソフトウェアの企画・検討から実装までを私が担当しましたので、今日はそのチェックロジックについて紹介したいと思います。もちろん、ここはこうであるべきではないのか? なんかのフィードバックをいただければ幸いで、今後も修正やアップデートを随時行っていきたいと考えています。

Crawl については、まだ公開していないのですが、下記の記事を書く際に利用しました。

ウェブページに対するチェックツールのチェック結果には差異がある?

他にも有償のもの、無償のものなどがいくつか存在するかと思いますが、何の言語で作られているかはともかく「検査のロジック」が同じであれば、結果は同じになるはずです。基本的には各ツールとも、HTMLソースやHTMLソースのレンダリング結果に対してチェックを行います。

ところが、必ずしも各ツールの検査結果は一致しません。JIS X 8341-3:2010(WCAG2.0)が規格である以上、同じ結果になるのが望ましいのでしょうが、お墨付きのついた検査のロジックが公開されているわけでもないので、やむを得ないことです(とはいえ、そんなに差異があるようにも見えませんが、ロジックが公開されていない以上、差がないとも言えません。ソースが公開されているものもあるので、ソース読めばわかるんでしょうし)。

公開されているロジック(最低要求仕様)としては下記のWAICのサイトのドキュメントがあります。

文字通り「最低要求仕様」とある通り、本当に最小限のことしか書かれていません。また、HTML5の登場や、最近の JavaScript を多用した動的な Web や WAI-ARIA などの新しい技術に対応するにはどうすればよいかなど、このドキュメントもそろそろ改訂が必要な時期にさしかかっているように思います。

コントラストチェックツールの検査ロジックは明確でツールによる結果の差は(基本的に)ない

また、HTMLに対するチェック以外にも、以下のようなコントラスト比のチェックツールがあります。

後者(ColorTester)は私が作成したのですが、コントラスト比については計算式が決まっているため、ツールによる差異はありません(正確には色空間の設定が影響するため、例えば OS X と Windows OS 等の差により微妙に異なることがあります)。

WCAG 2.0(W3C勧告)日本語訳 [原題:Web Content Accessibility Guidelines (WCAG) 2.0]

相対輝度

色空間内のすべての点の相対輝度。最も暗い黒を 0 とし、最も明るい白を 1 とする。

注記 1: sRGB色空間においては、色の相対輝度は、L = 0.2126 × R + 0.7152 * G + 0.0722 * B と定義されており、RG および B は以下のように定義される:

  • RsRGB <= 0.03928 の場合、R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

  • GsRGB <= 0.03928 の場合、G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

  • BsRGB <= 0.03928 の場合、B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

そして、RsRGB、GsRGB、及び BsRGB は、次のように定義される:

  • RsRGB = R8bit/255

  • GsRGB = G8bit/255

  • BsRGB = B8bit/255

^ という記号は、指数演算子である(計算式は、[sRGB] 及び [IEC-4WD]を参考にしている)。

ColorTester は背景色と前景色の推測というユニークな機能があります。推測のロジックについては下記の記事で紹介しています。

ColorTesterの背景色前景色の推測機能

ウェブページに対するチェック

さて、話しを戻します。HTML(ウェブページ)を元にチェックを行うロジックですが、PowerCMS 8341と Crawl では、以下のルールを元に、DOM操作で HTMLタグをパースして、チェックを行っています。Crawl のほうは WebKit のレンダリング結果に対してチェックを行う分、より正確な結果となります。PowerCMS 8341 においては CMS用のツールであるため、純粋にコンテンツ部分に対するチェックを行うことができる、管理しているコンテンツに対してエビデンスを残していける、などの特徴があります。

尚、実装にあたって私が心がけたことが一つだけあります。それは、できるだけ既存ツールが無条件に「人の手による確認が必要」とする項目についても、何らかのロジックで判定を行い、適合、N/Aとなる項目を増やす(というより、「確認」を減らす)ことです。何故か? 既存のチェックツールではエラーや警告はともかく、ここは人の手で確認してね、という項目がページごとに数十個(場合によっては数百)並ぶのです。ウェブアクセシビリティに造詣の深い、一部のコンサルタントや実装者でないと、実装も修正も適合判断もできない、という現実があるのかないのかわかりませんが、そういう現状があるのだとしたら、ウェブアクセシビリティの普及にはマイナスだと考えました。ここは、難しいところでもありますが。何よりも、ユーザーが不利益を被ってしまっては意味がありませんし。もちろん、異論反論あるでしょう。こいつはバージョン1.0。実際の利用者からのフィードバックなども随時反映していくつもりです。

また、各箇条について、チェック対象外、つまり適用しない項目を設定で指定できるようにしてあります。一部の項目については、設定によって厳しさのレベルを変えられるようにもしました。サイト固有の何か? がある場合はチェック結果の表示前にコールバックプラグインを追加してカスタマイズが可能です。

各箇条に対しOK、エラー、警告、確認、N/A(対象外)のいずれかを返します。frameもしくは iframe要素が存在する場合は、常に別途チェックを促します。

PowerCMS8341のレポート(その1)

PowerCMS8341のレポート(その2)

凡例

適合について評価可能
対象外(N/A)について判別可能
何らかのエラー、警告を表示可能
×常に確認を表示

等級A、等級AAに対応するチェックの基本的なロジック

細分箇条題名等級試験自動試験のロジック
A
7.1.1.1非テキストコンテンツAフォームのコントロールにラベルもしくはtitle属性がない(エラー)、フレームが存在する(確認)、Img、Input(type=image)要素にALT属性がない(エラー)、ALTテキストが空(確認)、ALTテキストがファイル名と一致(警告)、Object要素かEmbed要素がある場合(確認)、フォームの中に画像がある場合、CAPTCHAかどうかの確認を表示、いずれも見つからなかった場合、確認を表示。ALTテキストが空の場合に確認を出す、出さないについては設定で選択可能。別途、画像のALTのチェック画面で一括チェック済みの場合は、問題が見つからなかったことを表示。
7.1.2.1収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアAObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.1.2.2収録済みの音声コンテンツのキャプションAObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.1.2.3収録済みの映像コンテンツの代替コンテンツ又は音声ガイドAObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.1.3.1情報及び関係性A非推奨、廃止要素のある場合エラー。テーブルがある場合確認。いずれにも当てはまらない場合、確認(リストであるべき、などは確認できないため)。
7.1.3.2意味のある順序A×常に確認を表示。
7.1.3.3感覚的な特徴A×常に確認を表示。
7.1.4.1色の使用A×常に確認を表示。
7.1.4.2音声制御AObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.2.1.1キーボード操作Aonmouse〜属性のある要素にonkey〜が無い場合(onmouseoverに対するonfocus、onmouseoutに対するonblur指定がある場合を除く)に確認、そうでない場合、OK。
7.2.1.2フォーカス移動AObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.2.2.1調整可能な制限時間AScript要素及びイベント属性の指定がない場合N/A、そうでない場合、確認。<meta http-equiv="refresh">が存在する場合エラー。
7.2.2.2一時停止、停止及び非表示AScript要素及びイベント属性の指定があるか、Object要素とEmbed要素があるか、Gifアニメーションがある場合、確認、そうでない場合N/A。
7.2.3.13回の閃光又は閾値以下AScript要素及びイベント属性の指定があるか、Object要素とEmbed要素があるか、Gifアニメーションがある場合、確認、そうでない場合N/A。
7.2.4.1ブロック・スキップA見出し、もしくはスキップリンクがある場合OK、そうでない場合、エラー。フレームが存在し、title属性がないか、空文字の場合エラー、そうでない場合、確認。
7.2.4.2ページタイトルAtitle要素が存在し、空文字でない場合、確認。そうでない場合、エラー。
7.2.4.3フォーカス順序Atabindex属性の有無を確認し、指定があれば確認、そうでない場合、N/A。
7.2.4.4文脈におけるリンクの目的AA要素の内容が空の場合、Area要素のALTテキストが空もしくは属性がない場合、エラー。そうでない場合、確認。target属性の指定がある場合、確認。オプション設定でリンクテキスト=URLの場合に警告を出す、出さない、target属性の指定がある場合、確認を表示する、しないを選択可能。
7.3.1.1ページの言語Ahtml要素にlang属性もしくは xml:lang属性が無い場合、エラー、ある場合に確認。
7.3.2.1オンフォーカスAonfocusイベント(属性)の指定がある場合、確認、そうでない場合、N/A。
7.3.2.2ユーザインタフェースコンポーネントによる状況の変化Aフォームがない場合、N/A。フォームコントロールにイベント属性の指定が無い場合、N/A。フォームに送信ボタンがない場合、警告。そうでない場合、確認。
7.3.3.1入力エラー箇所の特定Aフォームがない場合、N/A。フォームがある場合、確認。
7.3.3.2ラベル又は説明文Aフォームコントロールにラベルがない場合、確認(ラベルもしくは説明があるか)。そうでない場合、N/A。
7.4.1.1構文解析ADoctype指定があり、htmlである場合、OK、そうでない場合、確認、指定がない場合エラー。id属性もしくはaccesskey属性の重複がある場合、エラー。
7.4.1.2プログラムが解釈可能な識別名、役割及び設定可能な値AScript要素及びイベント属性の指定がある場合、確認、そうでない場合、N/A。
AA
7.1.2.4ライブの音声コンテンツのキャプションAAObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.1.2.5収録済みの映像コンテンツの音声ガイドAAObject要素とEmbed要素が存在しない場合、N/A。そうでない場合、確認を表示。
7.1.4.3最低限のコントラストAA基本的には常に確認を表示。別途画像のチェックですべての画像に適合フラグもしくはN/Aとなっている場合、OK。
7.1.4.4テキストのサイズ変更AA×常に確認を表示。
7.1.4.5画像化された文字AA画像がない場合、N/A、そうでない場合、確認。別途画像のチェックですべての画像に適合フラグがついている場合、OK。
7.2.4.5複数の到達手段AA×常に確認を表示。
7.2.4.6見出し及びラベルAA見出しがない場合、警告、そうでない場合、確認。
7.2.4.7視覚的に認識可能なフォーカスAA×常に確認を表示。
7.3.1.2部分的に用いられている言語AAhtml要素以外にlang属性が存在する場合、確認を表示。
7.3.2.3一貫したナビゲーションAA×常に確認を表示。
7.3.2.4一貫した識別性AA×常に確認を表示。
7.3.3.3入力エラー修正方法の提示AAフォームがない場合、N/A。フォームがある場合、確認。
7.3.3.4法的義務、金銭的取引、データ変更及び回答送信のエラー回避AAフォームがない場合、N/A。フォームがある場合、確認。

7.1.4.3、7.1.4.5については、別の画面(アイテムの管理)画面で人の手によりチェックを入れることができるようになっており、そこを経てからチェックすることで「適合」判定が可能としています。正確には機械チェックで判別可能な項目、とは言えないかもしれませんが、ソフトウェアとして適合するためのインターフェイスやフローを提供しているということで◎(適合について評価可能)としています。7.1.4.3については、ColorTester と同様の機能をウェブアプリ内に実装しており、自動及び手動でのコントラストチェックが可能です。

7.2.4.1など、いくつかの項目については、PowerCMS 8341ではテンプレート側で担保することが前提です。PowerCMS 8341ではウェブページや記事については検証範囲を限定してチェックするので、これらの項目はほぼすべてのケースで適合となります。

判りやすい突っ込みどころとして、applet要素であるとか、bgsound要素とか、そういうのがない、ってのはありますよね。これらに対応していないのは、単に「もういい加減えーんちゃう? 見たことないわ」という理由なんですが、必要なら組み込んでいこうとも思います。ちなみに、ページ内で使われているタグを一覧化する機能、使われているタグによってページを検索する機能があります。

また、「HTML5の登場や、最近の JavaScript を多用した動的な Web や WAI-ARIA などの新しい技術に対応する」チェックとしては、このロジックでは不完全です。とはいえ、ウェブアクセシビリティ対応が急がれる官公庁や自治体においてそのような技術が用いられることは現段階では稀であり、こういったシンプルなロジックで検査することで対応負荷を下げられるのなら、このロジックには相応の価値があるのではないかと考えます。ロジックさえはっきりできれば、Perlモジュール化するとか、オープンソースのライブラリ化されるかとかで、恩恵を受けられる人も増えるかもしれません。

何かくどいくらいしつこくなりますが、違った見方やこういうケースどうすんの? ってのはあると思います。建設的な議論のたたき台になれば嬉しく思います。

CMSならではの、工夫

PowerCMS 8341 においては、CMSならではのいくつかの面で工夫しました。長くなりますのでここでは割愛しますが、ご興味のあるかたは下記の記事をごらんください。

さて、未来に向けて

仮にも私は有償ツールの提供元でもありますが、クローズドに各社が開発してツールごとに異なる結果となるよりも、こういうドキュメントを公開することで各ツールの検証結果の差異がなくなっていくことで、サイト運営者も、制作者も判断に迷うこともなくなるのではないか。 いまだにこの手のツールの紹介セミナーで「競合他社お断り」というケースも見られますが、ここはオープンにやっても良いのではなかろうか。この記事は1人のツール開発者からの提案でもあります。

で、今度さ、「ウェブアクセシビリティチェッカー開発者バトル」ってイベントを企画して、是非呼んでください!

ってことで、アクセシビリティやるぞ! やるぜ! 会場向かうぜ! (まだ早いか!)宜しくお願いします。

追記(12月4日16:10)

実際に大量のページをチェックしてると、あ、これあかんやつや、ってやつが見つかるもので、例えばページ内にある複数のリンクテキストが同一で遷移先URLがバラバラなものとか、これは機械判別できるな、これ 7.2.4.4 だな、とか、そういうのが日常的に見つかっていくわけで、追加機能要望や気づいた点を開発者へフィードバックできる機能とか(PowerCMSには管理画面からサポートフォームへ投げる仕組みがあるけど)も有用ではないかな、と思ったりしました。

あと、先週の MTDDC Meetup TOKYO 2014 で話したツール開発の Making のスライドも宜しければあわせてどうぞ。

さらに追記(12月4日16:45)

という「エア」ツッコミがあったので、以下のような機能を提供していることを追記しておきます。

で、このツッコミで思い出したのですが、この手のツールをつくるときに「褒めて伸ばすツール」という考え方をしました。つまり、このリンクテキスト同一云々の件は、こんな箇所があるよ? 確認してね。というメッセージを出すとして、逆になかったら「こういう問題箇所は見つかりませんでした!」的なメッセージを入れるというものです。褒めてくれるツールの方が、さわってて心地いいやん。ということです。

チェックツールを作っていると、いかにエラーを見つけるか指摘するか、という思考になってしまいがちなんだけど、いいところは敢えて褒めてあげよう、ということです。俺も成長したもんだ(違)。

スライドできました。Making of PowerCMS 8341 というテーマにしました。ツール自体の紹介はセミナーがあるので、今日はその裏話的なものにします。

それは本当に実現不可能か?~Something Different for the Best Web Solution~

というタイトルが掲出されているんですけど。でもちょっとわかりにくかったかなセッションタイトルが、と思ってさ。

Webに関わる人、会社の立ち位置はそれぞれに違いますが「もっと上手くプロジェクトを回したい」「製品やサービスをヒットさせたい」「競争力を高めたい」「もっと利益を上げたい」といった思いは共通ではないでしょうか? 一方で「毎回同じことの繰り返しをしていないか?」「労働集約的にリソースつぎ込んで解決しようとしていないか?」「もっとスキルやリソースに余裕があれば...」といった課題・悩みを抱えている方も多いと思います。 普段、CMSの機能に関する企画から実装、提案・導入支援までを幅広く行っていますが、いつも頭の中にあるのは「もっと違うやり方がないか?」「"あたりまえ"を"あたりまえ"で終らせて思考停止していないか?」という疑問です。 本セッションでは、Movable Type や PowerCMS を素材として、機能をデザインした背景や現在開発中のいくつかの製品の管理画面をお見せしながら、製品企画の背景や考え方についてご紹介します。

スライドの一コマ。AppleやGoogleにできて、俺たちにできないってのか? そのうち、奴らに仕事奪われるぞ全部。

実現できる...

この記事はサイトの善し悪しやリニューアル内容の是非について述べたものではありません。また、筆者が所属するいかなる団体・会社の意見でもなく、あくまで個人の見解であることをのっけからでっかい文字で表明しておきます!

色々な方が所感を述べられていますが、アクセシビリティについての言及があって何だか物議を醸しているようなので、実際どうなのかを確認してみようと思ったのです。忙しいので、機械任せです。自分の所感はひとこと、ふたことにとどめます。とどめます。とどまるのか? とどめよう。

W3C Markup Validation Serviceの検証結果

Crawl というOS Xで動作する自作の検査ツールでチェックしてみた

以下の検証結果、レポートはすべて Crawl(サイト評価の機能を持った自作のWebブラウザ)を用いました。検査したいページを開いて、メニューまたはキーボードショートカットで様々なレポートを作成してくれます。検査のロジックは? 自分で決めて自分でコード書きました。なので、自作自演? です。結果が正しいことを保証するものではありません。

え、miChecker ? あ、ありましたねそんなツール。そっちでのチェックは誰か他の方がやってください。

Crawlの検証結果表示画面のスクリーンショット

Crawl によるアクセシビリティチェック(JIS-X 8341-3:2010に基づく検証結果) 等級A/等級AA

Crawl による画像評価

img要素のalt属性の一覧と、ウチの会社で公開している ColorTester による背景色と前景色の自動チェックの結果を一覧化したものです。色の抽出に関するロジックはこちらの記事で紹介しています。つまり、こいつも自作自演です。結果が正しいことを保証するものではありません(しつこい)。

Crawl によるリンク評価

リンクテキストとそのリンクのリンク切れチェック、遷移先のページの title要素を一覧化したものです。ひとつまえの画像評価とあわせてみるだけでも深刻な問題を見つけやすいのではないかと思います。

所感

細かな検証はしていません。すいません忙しいのだ。でも、画像の alt属性値を眺めるだけでわかることもあるよ。Data_data_panel_100とか、tags_thumb_asia2、tags_thumb_outreach2(このあたりはCMSなのかツールなのかが自動的に入れたテキストっぽい)とか、141114_早慶戦(これはまだマシか)とか、そういうのが残っている。

ってことは、つまり、あれだ。少なくとも JIS-X 8341-3:2010 の AとかAAとかに準拠させようとか、そういう意図はなかったと思われる。外野からの憶測にすぎませんが。画像の alt以外は何もいいません。細かく検証もしてないし、並べたのはあくまでも機械「しかも自作」のツールですから。結果が正しいことを保証するものではありません(超しつこい)。

画像評価レポートの一部スクリーンショット

ツールでどこまで検証できるのか

HTML5とか、JavaScript使いまくりで動的に altを突っ込んでるだ、とか、正直そこまでいくと現状のチェックツールはまだまだついていっていないとは思います。CrawlについてはWebKitがレンダリング済みのHTMLをDOM操作で評価していっているので、そんなにはずれはないと思いますが、空の見出し、空のリンクテキスト、ファイル名から生成された alt属性値なんかはわかりやすいアクセシビリティ上の問題になりますので(以下略)

ツールのロジックについては、Web Accessibility Advent Calendar 2014 - Adventarに登録しているので、その際に書いてみたいと思います。

宣伝

12月8日(月)、東京でビジネスセミナーやります。参加無料で、且つ、私はツールの話しをしますが、植木さんや長谷川さんの話しがきけるだけでも来ていただく価値があると思うので、ご都合あう方は是非お越し下さい。

現場からは、以上です!!

今日、SEOがテーマのセミナーがあるので、MT、というか PowerCMS のプラグインを作りました。

キーワードの管理画面

テンプレートタグ

自動置換するブロックはテンプレートタグ(ブロックタグ)で指定します。

<MT:Keyword2Link blog_ids="children" add_attr='class="keyword"'>

このブロックのテキストからキーワードにマッチする部分を自動的にリンクにします

</MT:Keyword2Link>

パブリッシュすると、

<a class="keyword" href="http://example.com/keyword/SEO">SEO</a>

みたいなリンクに置換してくれるものです。キーワードとURLは管理画面から入力するだけでなく、CSVから一括で登録することもできます。便利でしょ? 便利、だよね!

※公開はちょっと待ってね。

Facebook

Twitter

このアーカイブについて

このページには、過去に書かれたブログ記事のうちWeb制作・ビジネスカテゴリに属しているものが含まれています。

前のカテゴリはMovable Typeプラグインです。

次のカテゴリはごあいさつです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6