-
インスタ映えに挑戦！AWS Amplifyの認証画面をInstagram風してみた
「インスタ映え」が、2017年のユーキャン新語・流行語大賞にノミネートされてから久しく、今日ではたくさんの写真がシェアされている。 そもそもインスタ映えとは、Instagramにシェアした写真が、見栄えよく映えることを表現した言葉だ。そしてフォトジェニック的な意味合いで用いられることもある。「それ映える！」など、写真にしたとき心が動かされる様を表す感動詞的な用法なのかもしれない。 それならば思うところがある。AWS Amplifyの認証画面をInstagramっぽくしたら、それはもう「インスタ映え」ではないだろうか。と、勝手に解釈してみることにした。 それではさっそくAWS Amplifyの認証画面をInstagram風にして「インスタ映え」なのかを検証してみようではないか。 インストール 「a-theme-react」をインストールする。 a-theme-reactは、AWS Amplify UIテーマをカスタマイズできるパッケージだ。 テーマを変更する テーマをカスタマイズするまえに、デフォルトのUIをご覧いただきたい。 シンプルな認証画面であることが分かっていただけたと思う。このUIをInstagram風に変更するわけである。 テーマを適用する 以上がテーマ適用の記述だ。まったく難しいことはない。a-theme-reactをimportして、theme propsにセットするのみでカスタマイズ完了だ。 「インスタ映え」だったか？ 答えは簡単だ。これは「インスタだぜ！」だ。感動詞的ではあるが、「インスタ映え」ではなかった。 もし実装することがあれば、「インスタだぜ！」と自慢してみてほしい。
-
CSSフレームワークBootstrapのダイアログを秒速で実装する「bootbox.js」が超便利
CSSフレームワークといえば、Bootstrapといえるほどのネームバリューを誇ります。使用を検討する場合は筆頭候補といえるでしょう。次の画像は「npm trends 」でトレンド調査した結果です。 圧倒的といえるほどのダウンロード数です。新進気鋭の有望なCSSフレームワークがリリースされても、Bootstrapが依然としてトップに立っていることがわかります。 なぜこれほどまでに人気であり続けられるのでしょうか？それには次のようなことが挙げられます。 効率がいい開発を図れる 洗練されたCSS設計（アーキテクチャ）の採用 HTMLモックをすばやく作成できる ルールに沿った使い方で開発速度アップを見込める HTMLにクラス付与するのみの簡単実装 充実したユーザーインターフェースが魅力 トレンドをおさえたアップデートが実施される 統一感のある構築ができる しかし一方で、特定のインターフェースを実装するにしてもHTMLとjQuery(JavaScript)の記述が必要です。Bootstrap経験があるエンジニアやデザイナーのなかには、 「ダイアログだけ使いたい。」「ダイアログを手軽に実装したい。」「HTMLとJavaScriptの記述が面倒くさい。」 という不満を覚えた人も少なくないのではないでしょうか？そこで本日の「bootbox.js」をお伝えしたいと考えました。 「bootbox.js」は、bootstrapダイアログボックス実装に特化したライブラリです。特筆すべきは実装がものすごく簡単です。JavaScript数行の記述でalertやconfirm、custom dialog、promptを作成できます。 基本的な機能 アラートダイアログ 確認ダイアログ プロンプトダイアログ カスタムダイアログ 導入 導入に際して、次のファイルを読み込んでください。 必要なファイル Bootstrap [CSSファイル] jQuery [JavaScriptファイル] Bootstrap [JavaScriptファイル] Bootbox [JavaScriptファイル] 読み込み例 読み込み例では、オンライン上のCDNから取得しています。適宜ダウンロードやnpmインストールを選択してください。 使い方 アラートダイアログボックス 注意を伝えるダイアログです。 基本的な使い方 簡易なアラートダイアログならば、一行で実装できます。 アラートダイアログの表示例です。alertメソッド引数の文字列がダイアログのラベルに表示されます。「Hello world!」となっていることがわかります。 コールバック設定 アラートダイアログが閉じたタイミングでコールバックが走ります。alertメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。 確認ダイアログボックス OK/Cancelボタンを持つダイアログです。 基本的な使い方 確認ダイアログは、コールバックの設定が必須です。confirmメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。OK/Cancelボタンのクリックの是非をコールバック値で判定します。 確認ダイアログの表示例です。confirmメソッド引数の文字列がダイアログのラベルに表示されます。確認ダイアログならではのOKとCancelボタンが表示されていることがわかります。 プロンプトダイアログボックス ユーザー入力を受け付けるダイアログです。 基本的な使い方 プロンプトダイアログは、コールバックの設定が必須です。コールバック関数では、ユーザー入力をコールバック値で取得することができます。ダイアログをキャンセル、またはCancelボタンをクリックした場合はnullになります。 ユーザーの入力を受け付けるインプットフィールドが設けられていることがわかります。…
-
Node.jsのHeadlessCMS「Strapi」を試す
こんにちは、ソリューションの五十嵐です。 Netlify CMS + GatsbyのようなJAMStackなブログが話題になっています。 弊社のブログもJAMStackな構成にしたいと思っていますが、Netlifyなどのサービスを利用するよりは自社のサーバにHeadlessCMSを構築したいと考えています。 調べたところによるとNode.jsで構築できる「Strapi」というオープンソースのHeadlessCMSがありましたので試してみようと思います。 https://strapi.io/ Strapi Strapiのインストールはnpmで行います。 公式のチュートリアル通りに以下のコマンドを実行しましょう。 インストールが完了したらstrapiコマンドでプロジェクトディレクトリを作成します。 公式ではMongoDBを推奨していますが、MySQL、PostgreSQLなども使用できるようです。 今回はMySQLで設定してみましょう。 DBはプロジェクト作成時に設定でき、MySQLの設定も簡単に行うことができました。 プロジェクトディレクトリが作成されたらそのディレクトリに移動しstartコマンドでstrapiを起動します。 無事起動すると以下のページで管理画面を開くことができます。 http://localhost:1337/admin Post作成 管理画面でユーザーを作成、ログインできたらブログ記事を投稿するためのコンテンツを作成しましょう。 コンテンツタイプの項目を選択します。 コンテンツタイプの追加を選び「Post」と入力し、記事コンテンツを作成します。 今回はサンプルなので記事コンテンツはString型のTitleとText型のDetailのみとします。 コンテンツは作成できましたがこのままではAPIで取得できませんので「ロールと権限 > public」から以下のようにチェックを入れ、権限を設定します。 これで記事の公開ができましたので実際にGETで取得してみましょう。 ブラウザでhttp://localhost:1337/postsにアクセスするとJSON形式のPostデータが取得できます GraphQL 最後にGraphQLでデータを取得できるようにします。 デフォルトでREST APIが有効になっているのでそのままでも良いのですが、今回はGatsbyのGraphQLからデータを取得する予定ですのでGraphQLを有効にします。 GraphQLを有効にするにはStrapiにプラグインを追加する必要がありますので、以下のコマンドでプラグインを追加しましょう。 これでGraphQLが有効になりましたので再度Strapiを起動し、http://localhost:1337/graphqlにアクセスしましょう。 GraphQLの実行環境が表示されるはずです。 まとめ Node.jsのHeadlessCMSであるStrapiを試してみましたが、思った以上に簡単に構築でき、GraphQLの有効化もプラグインのインストールだけで済みました。 手軽に構築できる点は良いと思うのですが、カテゴリやタグなどの設定を入れたり、マークダウンの記事エディタを入れたりすることは可能なのでしょうか。。。 その辺りは機会があれば検証してみたいと思います。
-
【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る
「2019年にわざわざ学ばなくてもいい言語」 が発表されました。 https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x CoffeeScriptを抑えて堂々の１位はElmとなりました。 残念なニュースではありますが、個人的には好きな言語ですのでElmで簡単なTodoリストアプリを作成してみます。 2019/07/01更新 コメントでご指摘頂きました。ありがとうございます！モジュールを分割せず１ファイルに修正し、GitHubにpushしましたのでこちらを参照するようにしてください。 ABAB↑↓BA より: 2019年6月28日 9:35 PM このモジュールの分割の分け方は公式ガイドで悪手とされています。1ファイルにまとめていただけると、混乱する方が減って嬉しいかもしれません。 https://guide.elm-lang.jp/webapps/modules.html Elmとは Elmは、コンパイルすることでWebアプリケーションを作成することができる純粋関数型言語です。 The Elm ArchitectureというアーキテクチャでWebアプリをModel-View-Updateという形にパターン化しています。 例えばユーザーのInputによって画面が更新されるWebアプリはThe Elm Architectureでは以下のようにパターン化されます。 環境構築 Elmのインストールはnpmで行います。 これだけでelmのインストールは終わりです。 次に作業ディレクトリを作りましょう。 ディレクトリを作成しその中でelm initコマンドを実行します。 以下のようにelm.jsonとsrcディレクトリが作成されれば完了です。 この状態でelm reactorコマンドを実行してみましょう。 elmのWebサーバが起動したらhttp://localhost:8000にアクセスするとElmの画面が表示されます。 実装 The Elm ArchitectureではModel-View-Updateの形でパターン化されますのでsrcディレクトリ以下にそれぞれのファイルと、エントリーポイントとなるMain.elmを作成します。 Model まずはModelから作成します。 Todoデータを格納するTodo型を作成します。 Todo型はString型のタイトルと詳細を持ちます。 Modelは複数のTodoデータを持ちますのでList型のtodosを宣言します。 初期値を設定します。 Todoリストの初期値は空にしたいので空のリストを設定します。 さらにTodo項目を追加するためのメッセージ(Msg)も作成します。 最終的にModelはこのようになります。 Update UpdateはMsgとModelを受け取って新しいModelを返します。 これはReduxのReducerがactionとstateを受け取って新しいstateを返す動きに似ていますね。 AddイベントはModelにTodo型のデータを追加します。 今回はサンプルなのでタイトルが「Todoタイトル」、詳細が「Todo詳細」となるTodo型のデータをModelに追加するようにしています。 View 次にViewを作成します。 Todoリストの項目をテーブルで表示しましょう。 viewTebleはModelのtodos(Todoリスト)を受け取ってテーブルを返す関数です。 elmではHaskellのような記述で関数定義を行います。…
-
記事内のソースコードをハイライトするWordPressプラグイン「CodeMirror Blocks」の使い方
「CodeMirror Blocks」プラグインは、ソースコードをハイライトします。 なんと100種類以上のプログラミング、スクリプト、マークアップ、メタ言語をサポート。および56種類ものテーマが用意されています。 技術系チュートリアル記事に最適なWordpressプラグインです。 特徴 軽量で軽い コーディング標準に従いコードを保護する 多岐にわたるオプションと直感的なUI クロスブラウザ互換 すべてのWordpressテーマと互換性あり RTL対応 翻訳の用意が整っている インストール プラグイン新規追加 「CodeMirror Blocks」をキーワード検索 「今すぐインストール」ボタンをクリック、「有効」ボタンをクリック 使い方 ブロック挿入アイコン「Code Block」をクリック 追加されたブロックにソースコードを入力 右メニュー「Language / Mode」から該当する言語を選択 右メニュー項目 Language / Mode該当するプログラミング、スクリプト、マークアップ、メタ言語を選択する Themeハイライトするテーマを選択する Show Line Numbers?行数を表示する Wrap Long Line?右端で折り返すか否か。 Editable on Frontend?記事画面のソースコード入力の可否 Disable Copy on Frontend?記事画面のソースコードコピーの可否