フォーム機能を利用している場合に、期間限定の応募フォームである日時になったら受付を停止したいセミナーの募集人数は１０人なので定員一杯になったら自動的に停止したいといったケースがあると思います。今回追加された機能を利用すると上記どちらも実現が可能ですので、具体的な方法についてご紹介します！

MovableType.net はサービス型CMSということもあり、Web担当者にもWeb制作者にもメリットがあります。今回は導入事例を中心にご紹介していきます。例えば以下の事例にあるように、制作者の開発期間の短縮することができる、納品後の運用負荷を軽減しその分コンテンツに集中する、といったことが可能です。ロケットスタートホールディングスが MovableType.net を使う理由 以下の事例では選んで頂いたポイントの一つとして「利用者がPCが苦手な場合もあるので管理画面の使いやすさは重要」という部分があります。ヒューマンブリッジ株式会社- MovableType.net 導入事例管理画面の各機能については、サービス開始してからも使いやすくなるように日々改善しているので、嬉しく思います。運用面でのセキュリティ対策や支払い、規約など企業利用に適しているということで採用いただいたケースもあります。東京海上日動メディカルサービスが MovableType.net を使う理由また、事例でもいくつかご紹介させていただいていますが、先日All Home Page 株式会社様が MovableType.net の紹介記事を書いて下さいました。もっと使おう！MovableType.net　ーMovable Typeアドベントカレンダー１２月４日の記事ですー | MtoM・Move up to MovableType.net　ムーブアップ（サイト引越し）サービス　古いウェブサイトをMovableType.netへお引越ししよう！All Home Page 株式会社様では実際に何件も MovableType.net をご利用いただいており、実際の利用者様ならではの感想をつづっていただいているので、現在 MovableType.net のご利用を迷われている方、すでにご利用いただいている方も、ぜひ一度ご覧ください。 より便利に活用できる方法が見つかるかもしれません。以上導入事例からいくつかご紹介させていただきましたが、ご利用いただいているお客様の声は他にも以下に掲載されていますので是非ご覧いただければと思います。MovableType.net 導入事例

プロダクトマネージャーの早瀬です。先日PWA Night vol.1 ～PWAのミライや活用方法をみんなで考えよう～で登壇させていただきました！PWA（Progressive Web Apps）は、ウェブサイトをネイティブアプリに近い感覚で利用できるようにするという趣旨の技術です。他の登壇者の方の内容もPWAの現在とこれから、ビジネス的なことなど非常に面白いお話を聞けました(^^)私からは、PWA×CMS活用アイデアということで以下の内容でお話＆デモをしています。登壇した際の資料は以下になります。MovableType.net では、昨年5月にPWAサポート機能をリリースしていて、マニフェスト設定ファイル、オフラインキャッシュ、Webプッシュ通知など機能面で簡単にウェブサイトで利用できる仕組みを用意しています。Webプッシュ通知機能などPWAをサポートする機能と新テーマ「Owned Media」を追加PWA（Progressive Web Apps）について（ウェブアプリマニフェスト、Webプッシュ通知、Service Worker） - マニュアル | MovableType.net他の登壇者の資料や参加者のブログ記事など、以下のページに掲載されていますので是非ご覧ください！PWA Night vol.1 ～PWAのミライや活用方法をみんなで考えよう～また、勉強会第２回も3/20に開催されますので興味のある方はご参加いただければと思います。PWA Night vol.2 ～PWAのミライや活用方法をみんなで考えよう～

フォーム機能の自動返信メールのFromのメールアドレスを、SMTPの設定を行えば自社（独自）のメールアドレスを設定できるようになりました。自動返信メールのFromで自社ではないメールアドレスが表示されるのはちょっと、、、といった場合にご利用ください。今回は、Gmail(GoogleApps)を例に具体的な設定方法を紹介します！Gmailの設定まず、自動返信メールに利用するメールアドレスを追加します。今回はautoreply@example.comといったメールアドレスを設定します。今回前述したメールアドレスはエイリアスとして作成して利用しているのですが、Gmailのエイリアス設定は以下の方法で行えるので準備しました。メール エイリアスの追加や削除Gmailの設定＞アカウントにある、名前のところの他のメールアドレスを追加から追加します。確認メールが届くので確認の手順を行います。以上でGmail側の準備は完了です。MovableType.net でSMTPの設定続いて、MovableType.net の管理画面のフォーム＞一覧から設定したフォームをクリックし、自動返信メールの設定欄にあるSMTP設定を行います。SMTPサーバー：smtp.gmail.comポート：465Fromアドレス：Gmailで設定したメールアドレスユーザー名：Gmailアカウントのメールアドレスパスワード：設定したパスワード※パスワードはGoogleの2段階認証を設定している際に利用できるアプリパスワードを発行することを推奨します。上記設定を行い保存します。保存するとテストメールの送信ができるようになるので、実際に設定が正しくされているかフォーム公開前に確認することができます。実際にフォームを送信してみると、以下のようにFromのメールアドレスが指定したメールアドレスになります。表示名の部分は、自動返信メールの表示名で指定することが可能です。この機能はMovableType.netのフォームとMovavbleType.netフォームのどちらでもご利用いただけます。フォーム運用の際には是非お試しください！

いつも MovableType.net をご利用いただき、ありがとうございます！プロダクトマネージャーの早瀬です。2019年2月5日で MovableType.net が公開されて4年となりました。1-3周年の記事は以下になります。MovableType.net は3周年を迎えました！MovableType.net は2周年を迎えます！MovableType.net は今日で1周年です！

お問い合わせフォームを設置する場合、個人情報を取得する場合は取扱について同意してもらうことが必須、というケースがあります。今回はMovableType.netのフォーム機能で、実現する方法をご紹介します。項目設定でチェックボックスを利用するフォームを作る際に、項目変更ページで必要な項目を作っていきますが、個人情報に同意する項目はチェックボックスを利用します。設定ポイントは以下になります。項目名：個人情報について、など項目の名前を設定します。必須項目：今回はこの項目にチェックを入れないと送信できないようにしたいので、必須項目に設定します。オプション：チェックボックスに対しての名前になるので同意するなどにします。補足説明文：説明の文章を書き、プライバシーポリシーページへのリンク等を記述します。フォームの項目内ではHTMLタグは利用できませんが、URLを記述すると自動的にリンクになります。上記のように設定すると、実際には以下のように表示され、個人情報の取扱について同意した上でフォームの内容を送信させることができます。是非ご活用ください。

＊この記事の内容は、MovableType.net フォームでのみ利用できる機能です。MovableType.net フォームの新機能として、各フォームに個別のURLを持たせてフォームを表示できるようになりました。アンケートフォームなど、わざわざサイト内にページを作ってそこに貼り付けるのはちょっと面倒、、、といった場合に簡単にフォームを作成して公開することが可能です！今回は実際の設定方法をご紹介します。フォームの作成フォームの基本設定や項目については以下のマニュアルや活用ブログの記事をご覧ください。マニュアル | MovableType.net フォームMovableType.netフォームアーカイブ - MovableType.net 活用ブログページ設定を行うフォームの設定ページのタブのページ設定をクリックすると、以下の項目が表示されます。個別URL：利用するにチェックを入れると、該当のフォームにURLをもたせることができます。ファイル名：実際に表示させるページのファイル名を設定します。カスタムCSS：フォーム内のCSSは基本設定のカスタムCSSで指定しますが、その外側の見た目をCSSでコントロールすることができます。設定し保存すると、右上の確認リンクから実際のページを表示することができます。カスタムCSSによる見た目のカスタマイズフォームの標準のCSSは以下になっているので、カスタムCSSではそれを上書きするかたちで指定します。body { margin: 0;}.banner { height: 278px; background: #316a8b;}.content { max-width: 640px; margin: -100px auto 0;}.form-title { color: white; margin: 0 10px 5px; font-size: 2em;}@media (max-width: 640px) { .banner { height: 122px; } .form-title { font-size: 1.5em; }}.banner の background: #316a8b の値を変えるとヘッダーの色が変わるので効果的です。是非様々な用途でご活用ください！＊この記事の内容は、MovableType.net フォームでのみ利用できる機能です。

先日、MovableType.net 逆引き辞典をリニューアルしました！開発者の目線から「こんな機能が欲しい！」という点を盛り込み、見やすさも使いやすさもパワーアップ！掲載するMTタグの種類も大幅に増えています。テンプレート開発で立ち止まった時、すぐに解決できるサイトを目指しました。ぜひ活用してみてくださいね！今回は、そんな新しい逆引き辞典のポイントを作者自らご紹介します。

様々な言語環境からMovableType.netの情報の取得や更新が行えるDataAPIを公開しましたが、今回はiOSの写真アプリから直接アイテムに画像をアップロードする方法を紹介します。いつも写真をiPhoneで撮るんだけど、記事はPCでガッツリ書きたい。でも画像をPCに読み込んでアップして、、だと面倒だなぁ、、、といった場合に効率よく書くことができるようになります！事前にDataAPIを有効にして、利用するユーザーのパスワードの設定等が必要です。詳しくは以下のマニュアルをご覧ください。Data APIを利用する - マニュアル | MovableType.net iOSのショートカットアプリをダウンロードしておくまず、iPhone（iOS）のショートカットアプリをインストールしておきます。‎「ショートカット」をApp Storeでショートカットアプリのインストールショートカットアプリのインストールは以下にアクセスして行います。MTへ画像をアップロードショートカットを入手をクリックし、ショートカットアプリで開きます。ショートカットを取得ボタンを押すと、DataAPIのエンドポイントの指定が表示されます。URLのhttps://example.comの部分を自分のサイトのドメインに変更します。次に認証情報の2項目をクリックし、DataAPIで指定されたユーザ名とWebサービスパスワードを入力します。完了すればショートカットアプリとして登録されます。写真アプリから画像をアイテムに登録する写真アプリを開き、特定の画像を開くもしくは選択から複数の画像を選び、左下のボタンを押します。一番下の段にショートカットがあるので（なければ右端のその他を開き、ショートカットをオンにする）、それを選択します。MTへ画像をアップロードを実行します。途中でどのブログにアップロードするかを選択する画面が表示されるので、投稿先を選択します。自動的に指定したブログのアイテムに追加されます。という感じで、一度設定してしまえば後は写真アプリから直接アイテムへ画像をアップロードできるようになります。是非サイト運用にご活用ください！

例えば商品を色々とサイトに掲載している場合、この商品について問い合わせるといったボタンを用意し、問い合わせフォームに誘導したいことがあるかと思います。今回は特定の商品ページから遷移すると、フォームの1行テキストの項目に商品名が自動で挿入され、フォームの項目として送信できるようにする、という方法を以下のマニュアルを元にご紹介します。フォームの項目の値をJavaScriptで指定する - マニュアル | MovableType.netフォームの作成まずフォームを作成するのですが、今回の項目は以下になります。商品名（1行テキストの閲覧のみの状態で表示）お名前メールアドレス内容（複数行テキスト）ポイントは、最初の商品名の部分を1行テキストを利用し項目名を商品名に変更、表示モードを閲覧のみの状態で表示を選びます。フォームのページを作成しフォームとscriptを設置次にウェブページ等でお問い合わせページを作成し、先程のフォームiframeのソース貼り付け、以下のファイルをファイルマネージャー等でアップロードし、読み込み用のリンクを貼ります。 form-param.jsをダウンロード 上記ファイルのポイントは、var names = ["商品名"];の商品名が先程1行テキストで設定した項目名と同じになっているところです。各商品ページにお問い合わせページへ誘導するリンクを作成するお問い合わせページへ遷移する場合に、以下のようにURLの後ろに項目名と値を入力すると、フォームのページでその項目の値がセットされるようになります。http://example.movabletype.io/contact.html?項目名=値今回は商品名が記事タイトルになっているので、記事のテンプレートで自動的に項目の値部分を入力できるようにしてみました。a href="$mt:BlogURL$inquiry.html?商品名=$mt:EntryTitle encode_html="1"$"button class="item__button"span商品について問い合わせる/span/button/a実際の表示結果は以下のようになり、このページから遷移すると、フォームでは以下のように表示されます。商品名の部分は編集不可状態になっているので、このままお問い合わせを送信すると商品名の項目としてマカロンが入った状態で受け付けることができます。今回はURLの指定を自動的にできるボタンにしてみましたが、もちろん手動で記述し記事内にリンクを張っても大丈夫です。フォームの項目の値を指定する方法は様々な運用で使えますので是非お試しください！

Webサービス同士を連携させるIFTTT(イフト)を利用できる、IFTTT Webhooks 機能を公開しました。IFTTT Webhooks 機能は各ブログ毎に設定でき、設定をすれば以下の状態の変更の場合に自動的にリクエストを送信します。記事の公開などのステータス変更（差し替え版も含む）ウェブページの公開などのステータス変更（差し替え版も含む）記事・ウェブページのワークフロー時のステータス変更詳細のリクエストの種類と送信されるデータについては以下のマニュアルも参照してください。IFTTT Webhooks 機能今回は、記事が公開された時にビジネスチャットアプリSlackの指定したチャンネルに投稿する、という設定方法を紹介します。「社内のコミュニケーションツールでSlackが使われているんだけど、自社のニュースやクライアントのサイトの記事公開など自動で通知してくれたらいいなぁ。。」といった場合に非常に便利です！IFTTTのAppletを作成するIFTTTでアカウントを作成し、My AppletsのページのNew Appletを作成します。次に＋thisを選択トリガーとなるサービスを選ぶ画面が表示されるので Webhooks と入力し選択します。Receive a web request というボックスが表示されているのでクリックします。今回は記事の公開時をトリガーにしたいので、イベント名をpost_releaseにします。その他のイベント名はマニュアルを御覧ください。続いて、＋that を選択します。アクションを実行するサービスを選択する画面が表示されるので Slackと検索して選択します。Connect ボタンを押すとslackにサインインする画面が表示されるので、サインインしてAuthorizeします。続いて、Slackでのアクションを設定するので、Post to Channelのページへ移動します。今回は特定のChannelに送信するので、Channelsを選択し送信したいチャンネルを選びます。送信されるイベントは共通で以下になるので、value1: 記事タイトル（なければ空白）value2: 記事概要（なければ空白）value3: 記事が公開状態の場合は公開URL、未公開の場合はプレビューURLMessageとTitleを以下のように設定しました。Create Action ボタンを押すと以下の画面が表示されるので、アプリの名前を設定しFinishボタンを押します。これでアプリの作成は完了です。その後、Webhooks のページに移動しDocumentationのページに移動するとAPIキーが表示されているので、このキーをコピーします。MovableType.net 側の設定管理画面の設定したいウェブサイトもしくはブログの、設定＞Webサービス の IFTTT Webhooks の設定を有効にして、先程コピーしたAPIキーを設定します。以上で、指定したブログで記事が公開されたタイミングで以下のようにSlackのChannelに通知されるようになります。是非、運用効率化に利用してください！

スタンダードプラン以上では、更新情報をタイムリーに閲覧者に届けるWebプッシュ通知機能が利用でき、実際に自分で導入する方法は以下になります。ウェブサイトにWebプッシュ通知の購読機能を持たせる上記方法の場合、設置したブログを対象に購読することになりますが、カスタマイズをすると特定のブログの購読やウェブサイト配下のすべてのブログを登録することができます。特定のブログを指定する方法a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir: 'blog'})" section class="side-webpush"Webプッシュ通知の購読/section/a特定のブログを１つ指定する場合は、上記のソースで購読ボタンを設置し rootDir: 'blog' のblogの部分を指定したいブログのフォルダ名を記述します。例えば、example.com/staffblog/といったようにウェブサイトの配下にスタッフブログを作ったけど、トップページなどのウェブサイト上でも購読させたい、といった場合に利用できます。ウェブサイトも含む配下のブログでオンになっているブログをすべて購読させる方法対象が１つであれば上記のようにシンプルに対応が可能でしたが、ウェブサイトも含む配下のブログもまとめて購読する、という場合には少々追加コードが必要になります。ただ、これが実現できれば閲覧者は１度購読するだけでそのサイト内のWebプッシュ通知を利用しているすべての更新情報を受け取ることができるようになるので便利です。まずは購読ボタンの方のソースコードは以下になります。a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir:'/'})" spanWebプッシュ通知の購読/span/aこちらも rootDir:'/'といったように指定するのがポイントです。続いて、必要なスクリプトを出力させるmt:ServiceWorkerSnippetにもその下に追加で以下のスクリプトを追加します。$mt:ServiceWorkerSnippet pn_auto_spawn="0"$script id="subscribe-all-blogs" data-blog-dirs='mt:Blogsmt:If tag="PushNotificationEnabled"mt:BlogDirname,/mt:If/mt:Blogs'if (MT.PushNotification.isSupportEnvironment()) { MT.PushNotification.ready.then(function() { var service = MT.PushNotification.PushNotificationService.getInstance(); var siteUrl = (function() { var aElement = document.createElement("a"); aElement.href = "/"; return aElement.href; })(); service.on("scriptionstatuschange", function(data) { if (!(siteUrl in data)) { return; } var siteIsSubscribed = data[siteUrl]; document .getElementById("subscribe-all-blogs") .dataset["blogDirs"].slice(0, -1) .split(",") .forEach(function(dir) { MT.PushNotification.isSubscribed({ rootDir: dir }).then(function( blogIsSubscribed ) { if (siteIsSubscribed !blogIsSubscribed) { service.subscribe({ rootDir: dir }); } else if (!siteIsSubscribed blogIsSubscribed) { service.unsubscribe({ rootDir: dir }); } }); }); }); });}/script上記により、Webプッシュ通知がオンになっているブログすべてをまとめて購読させることができます。※購読は裏側で１つ１つ行っているため購読ブログ数が多い場合は、登録に時間がかかる場合があります。極端に多い場合はブラウザを閉じないようメッセージ等を表示してください。以上、タイムリーな情報発信に便利なWebプッシュ通知機能、ぜひご活用ください。Webプッシュ通知を利用する - マニュアル | MovableType.net