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

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 導入事例

こんにちは！プロダクトマネージャーの早瀬です。「CMSを入れていないウェブサイトなんだけど、自分たちでニュースとか更新できようにできないかな？」といった相談を個人的に知人から受けまして、その希望をMovableType.netで実現しました。その際、どのような手順でどのような対応を行ったかを記事としてまとめてみたいと思います！サイト移行の大まかな流れサイトを移行し、CMS化する流れはざっくりと以下になります。現在のサイト構成を確認し、どういったサイト構成にするか設計する現行サイトのファイルを移行する必要な部分のCMS化を行うサイト構成の確認と設計まず、現行のサイトの確認をします。サイト構成はシンプルに以下でした。トップページ（index.html）ギャラリー（gallery.html）受注制作（order.html）販売について（sales.html）レッスン（lesson.html）お問い合わせ（contact.html）CMS化する方法としては、いくつかのページはファイルのままアップする、すべてのページをウェブページで管理できるようにする、など色々あるのですが今回は必要最低限で以下の方法をとることにしました。各ページはインデックス・テンプレートで作成するお問い合わせは標準機能のフォームに差し替えるお知らせなどのニュースに関するテンプレートを追加する現行サイトのファイルを移行ひとまず、現在のサイトのhtmlやcssや画像パーツなどをアップロードします。静的なファイルはデザイン＞ファイルマネージャで管理でき、ZIPに圧縮してアップロードすると階層構造そのままに展開することも可能です。複数ファイルをアップロードできる ZIP 展開機能が利用できるようになりました容量の大きなZIP ファイルを分割してアップロードする時のコツ今回のポイントは、ZIPに圧縮する際にドメイン直下に余計なフォルダができないように、現行のサイトのルート直下のファイルとフォルダを全選択して圧縮します。圧縮したZIPファイルを選択すると、以下のように展開するかを聞かれるのでチェックを入れてアップロードします。アップロードが完了し、展開処理が終わると以下のようにファイルマネージャー上で管理できるようになります。各ファイルへのパスが問題なければそのままページとして表示されます。必要な部分のCMS化続いて、必要の部分のCMS化とお知らせ部分を記事で更新できるようにしていきます。各ページのインデックス・テンプレート化まず、各ページをテンプレート化します。デザイン＞テンプレートのインデックス・テンプレートの新規からテンプレートを作成するのですが、ここには元のサイトのindex.htmlのhtmlソースを貼り付けます。出力ファイルを同じindex.htmlにします。上記の方法で他のページもすべて作成します。作成したら、ファイルマネージャーでアップロードした各htmlファイルを念の為削除しておきます。お問い合わせフォームの差し替え元のお問い合わせフォームはphpで作成されていたので、MovableType.netのフォームに置き換えます。項目は元のフォームと同じものにし、必要に応じてカスタムCSSで見た目も調節します。作成したフォームの埋め込みコードは、お問い合わせテンプレートの該当の箇所に貼り付けます。トップページに新着記事一覧部分を追加するトップページに最新の新着記事一覧を追加します。トップページの該当箇所に以下のようなソースを追加します。div class="news" ul mt:Entries unique="1" limit="5" li a href="$mt:EntryPermalink$" time class="new-icon" datetime="$mt:EntryDate format="%Y.%m.%d"$"$mt:EntryDate format="%Y.%m.%d"$/time p class="title"$mt:EntryTitle encode_html="1"$/p /a /li/mt:Entries /ul /div p class="text-right news-list"a href="$mt:BlogURL encode_html="1"$news.html" class="newslist-button"i class="fa fa-angle-double-right"/i お知らせ一覧/a/p これで以下のように記事の更新情報のリストを表示できます。表示を整えるためにニュース用のCSSも追加してください。お知らせ一覧ページの追加他のページのテンプレートを流用してお知らせ一覧ページとして、インデックス・テンプレートでnews.htmlのページを作成します。記事一覧部分はページ送りも含めると以下のようなソースになります。 div class="news" ul mt:Entries paginate_by="10" li a href="$mt:EntryPermalink$" time class="new-icon" datetime="$mt:EntryDate format="%Y.%m.%d"$"$mt:EntryDate format="%Y.%m.%d"$/time p class="title"$mt:EntryTitle encode_html="1"$/p /a /li mt:EntriesFooter nav class="page-navigation" ul class="page-navigation-list" mt:PaginationHasPrevious li class="page-navigation-list-item page-navigation-prev"a href="$mt:PaginationPreviousURL$" rel="prev"前の10件/a/li /mt:PaginationHasPrevious mt:PaginationHasNext li class="page-navigation-list-item page-navigation-next"a href="$mt:PaginationNextURL$" rel="next"次の10件/a/li /mt:PaginationHasNext /ul /nav /mt:EntriesFooter /mt:Entries /ul /div /div!-- /content_news --これを流用して、カテゴリアーカイブや年別アーカイブも必要に応じて作成します。記事個別ページの追加記事の詳細を表示する記事アーカイブのテンプレートを作成します。デザイン＞テンプレートのアーカイブ・テンプレートから、新規でアーカイブタイプを記事にして作成します。ポイントは以下の部分のソースになります。 div class="content_news_body" h2$mt:EntryTitle encode_html="1"$/h2 time datetime="$mt:EntryDate format="%Y-%m-%d"$"span class="year"$mt:EntryDate format="%Y"$年/spanspan class="monthday"$mt:EntryDate format="%b月%e日"$/span/time mt:EntryCategoriesa href="$mt:CategoryArchiveLink$" class="category"$mt:CategoryLabel encode_html="1"$/a /mt:EntryCategories div class="entry_body" $mt:EntryBody$ $mt:EntryMore$ /div!-- /content_body -- /div以上で更新機能を持たせるためのCMS化は完了です。実際に作成したサイトは以下になります。RIKAチョークアート工房是非サイト移行等で上記方法をご活用ください！MTタグなども含むテンプレート編集について学習されたい方は以下のコンテンツもご覧ください！トフでもできる！？テーマ開発講座

フォーム機能では、独自の項目のバリデーション（入力される値のチェックやエラーメッセージの表示）やノーマライゼーション（入力された内容の均一化）をカスタムスクリプトとして実現することができます。フォームの項目の値をJavaScriptで制御する - マニュアル | MovableType.netフォームのカスタムスクリプト（フィールド更新処理の仕様） - マニュアル | MovableType.netフォームのカスタムスクリプト（バリデーション処理の仕様） - マニュアル | MovableType.netフォームのカスタムスクリプト（ノーマライゼーション処理の仕様） - マニュアル | MovableType.net今回は、実際にカスタムスクリプトを設置する方法をご紹介します。カスタムスクリプトの設置まず、scriptの設置場所ですが、必ずフォームを設置しているページ内（iframeのソースを貼っているページ）に埋め込んでください。今回はインデックステンプレートで作成し、設置するページのテンプレートに以下を記述しました。script src="mt:BlogURLcustom-script.js"/script内容は以下になりますwindow.MTNetFormDataLayer = window.MTNetFormDataLayer || [];function MTNetForm() { MTNetFormDataLayer.push(arguments); }MTNetForm("validator", [{id: "メールアドレス",validator: function(value) {if (/@example.com/.test(value)) {return "上記メールアドレスのドメインは利用できません。";}}}]);MTNetForm("normalizer", [{id: "郵便番号",normalizer: function(value) {return value.replace(/[０-９]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xfee0);});}}]);特定のドメインのメールアドレスの受付を制限する例えば企業のメールアドレスしか登録させないようにしたい（フリーのメールアドレスを登録させたくない）、というケースがあります。その場合は上記ソース前半の、@example.comの部分を制限したいドメインに変更することによって以下のようにエラーメッセージを表示させることができます。全角で入力した郵便番号を半角に変換する郵便番号の入力が閲覧者によって全角になったり半角になったりとバラバラになるケースがあります。上記スクリプトの後半では、入力した郵便番号に対して必ず半角に変換して送信されるようにしています。以上、フォームをより便利に利用できるようにカスタムスクリプトを是非お試しください！

プロダクトマネージャーの早瀬です。先日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の指定を自動的にできるボタンにしてみましたが、もちろん手動で記述し記事内にリンクを張っても大丈夫です。フォームの項目の値を指定する方法は様々な運用で使えますので是非お試しください！