スキップしてメイン コンテンツに移動

投稿

7月, 2019の投稿を表示しています

Firebase Databaseで要素の数をカウントする方法

Firebase Databaseで要素の数をカウントする方法Firebase Databaseで子要素の数をカウントする方法を紹介します。SQL文で言うところの、COUNT()文でレコード件数を取得する方法の、Firebase Databaseでのやり方です。子要素のカウントを取る方法は、大きく以下の2つの方法があります。(他にもあるかもですが…)#内容方法1valueイベントで親要素の参照を取得して、
parent.numChildrenで子要素の数をカウント方法2Cloud Functionsでデータ書き込み時に子要素の数を集計それぞれの方法について、以降で使い方やメリット・デメリットを解説します。前提(環境など)・この記事は、2019年7月時点の情報です。
・Javascript(Node.js)を使ったサンプルです。方法1 parent.numChildrenで子要素カウント1つ目の方法は、クライアントサイドSDKのnumChildren関数を使って子要素をカウントする方法です。次のサンプルコードは、1行目で親要素/usersの参照を取得し、valueイベントの中で子要素の数をカウントする例です。let firebase_node = firebase.database().ref('/users'); firebase_node.once('value', parent =>alert('Count: '+ parent.numChildren()));メリットこの方法のメリットは、何と言っても実装が簡単であることです。上のサプルコードを見ても分かる通り、たった2行で子要素の数をカウントできます。デメリットこの方法デメリットは、データの件数を取得する為に、子要素のデータをすべてダウンロードすることです。データ件数が少ない場合は問題にはなりませんが、件数が膨大になると、通信量・処理速度共に重くなってしまいます。方法2 Cloud Functions子要素の数を集計2つ目の方法は、FirebaseのCloud Functionsでデータの更新をトリガーして、子要素の数を集計する方法です。サーバーサイドで処理する為、要素数(データ数)が膨大になる場合に有用な方法です。次のサンプルコードでは、/users要素…

Vue.jsでarray.length=0の変更を検知しない

Vue.jsでarray.length=0の変更を検知しない タイトルの通りですが、Vueでリストをクリアするとき、array.length = 0としても変更が検知されず画面の再描画が行われない問題(仕様)があります。この記事では、Vueで変更が検知されるリストのクリア方法について紹介します。
リストの変更が検知される関数 Vueの公式ドキュメントの記載があります。
Vue は画面の更新もトリガするために、監視された配列の変更メソッドを抱合 (wrap) します。抱合されたメソッドは次のとおりです:push()pop()shift()unshift()splice()sort()reverse() 変更が検知されるリストのクリア方法 リストから要素を削除する splice()関数は変更を検知してくれるため、次のよう書けそうです。
if(this.users.length >0){this.users.splice(0,this.users.length)}splice()は、リストの第2引数に"0"を指定すると、結果的に何もしないため、次のようにもっとシンプルに書けます。
this.users.splice(0,this.users.length)

[Javascript]リスト(配列)から条件に一致する要素をカウントする

[Javascript]リスト(配列)から条件に一致する要素をカウントするJavascriptのリスト(配列)から、条件に一致する要素をカウントする方法を紹介します。Aarryのreduce関数を使うを簡単にできます。サンプルコード次のサンプルコードは、ユーザ情報を格納しているリストから、20歳以上の人をカウントする例です。let count =this.users.reduce((prev, item)=>{return prev +(item.age >=20?1:0)},0)

原稿用紙に縦書き入力できるツールまとめ

夏休みの作文に便利!!原稿用紙に縦書き入力できるツールまとめこんにちは、皆さんは夏休みの宿題の作文は終わりましたか?作文を原稿用紙に清書する前に、下書きを作成する方が多いと思います。今回は、パソコンで原稿用紙に縦書きで文書を入力できる便利なツールを紹介したいと思います。Windows で縦書きできるソフトまずは、Windowsで縦書きできるツールを2つ紹介します。ルビにも対応した無料ソフトの「VerticalEditor」*画面イメージ(公式サイトより引用)
名前の通り、縦書きで文章が入力できるエディタです。台本形式・原稿用紙形式で入力が行え、ルビにも対応しています。これだけ高機能なのに、無料とはすごいです。[公式サイト]
http://infoseek_rip.g.ribbon.to/truestories.hp.infoseek.co.jp/定番「のMicrosoft Office Word」無料ではありませんが、定番中の定番の Microsoft Office Word でも、原稿用紙の形式で縦書き入力を行う事ができます。Wordで原稿用紙の設定を行う方法リボンメニューより、[レイアウト] -> [原稿用紙設定] を選択します
赤枠の部分を設定し [OK]ボタンをクリックします
すると、Word の画面に原稿用紙の枠が表示され、枠に縦書きで文書が入力できます
Mac OS で縦書きできるソフトMacでも縦書き入力できるソフトがあります。今回は無料で使える2つのツールを紹介します。シンプルな使い心地の「iText Express」画面イメージ
「iText Express」は、原稿用紙の他に、キャンパスノート・シナリオなど、他にもさまざまテンプレートがあり、原稿入力以外の用途でも活躍しそうです。iText Expressで原稿用紙に縦書きする方法「iText Express」は、最初はテンプレートが選択されておらず、白紙用紙に入力するモードになっています。原稿用紙のテンプレートに設定する手順は以下の通りです。メニュー → [ヘルプ] -> [サンプル文書] -> [原稿用紙(A4縦)横書 20×20 ひな形] を選択MacのPagesが縦書きに対応2019年3月頃のアップデートで、MacのPagesでも縦書き編集が可能になりました。ただ、原稿用紙のテン…

Vue.jsでサジェスト入力を行う4つの方法

Vue.jsでサジェスト入力を行う4つの方法今回は、Vue.jsでサジェスト入力を行う方法を4つ(内1つは自作コンポーネント)紹介します。サジェスト入力とは、入力途中に候補となるものを予測し、入力項目の下に候補として表示する機能です。Googleの検索窓で何か文字を入力すると、下に候補でてくるあれです。方法1 HTML5のautocomplete属性を使うHTML5で追加されたautocomplete属性を使うと、Vue.jsでも簡単にサジェスト入力が実現できます。<input>要素のautocomplete属性は、<input>要素に文字を入力すると、その文字を含む候補を提示して、内容を自動補完することができます。入力候補のデータのリストをは、 同じくHTML5で追加された<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。以下サンプルコードです。<inputtype="text"name="yourarea"autocomplete="on"list="food"/><datalistid="food"><optionv-for="n in ['ハンバーガー','てりやきバーガー','ポテト']":key="n">{{n}}</option></datalist>上記のコードで、入力欄に「バーガー」と入力すると、次のイメージのように「バーガー」の文字を含む候補が表示されます。表示された候補を矢印キーまたはマウスで選択すると、選択した候補をサジェスト入力できます。方法2. vue-simple-suggestを使う上で紹介したHTML5のautocomplete属性は、IOSには対応していないため、スマホ対応する必要があるサイトの場合あは、これから紹介する「vue-simple-suggest」のような
を使う必要があります。「vue-simple-suggest」は、その名の通りVue.jsでシンプ…

Apacheを起動(start)/停止(stop)/再起動(restart)する[UbuntuとかCentOSとか]

Apacheを起動(start)/停止(stop)/再起動(restart)する[UbuntuとかCentOSとか]Ubuntu環境で、Apache2の起動/停止/再起動を行う方法を紹介します。Ubuntu環境でApacheを起動/停止/再起動Apacheを起動sudo service apache2 start Apacheを停止sudo service apache2 stop Apacheを再起動sudo service apache2 restart CentOS(6以前)でApacheを起動/停止/再起動Apacheを起動sudo /etc/init.d/httpd start Apacheを停止sudo /etc/init.d/httpd stop Apacheを再起動sudo /etc/init.d/httpd restart CentOS(7以降)でApacheを起動/停止/再起動sudo service httpd start Apacheを停止sudo service httpd stop Apacheを再起動sudo service httpd restart さいごにここまで紹介したように、Linuxディストリビューションによって、Apacheを起動・停止するコマンドが異なっています。統一して欲しいですね…

すぐ作れる!DockerでFTPサーバーを構築

すぐ作れる!DockerでFTPサーバーを構築DockerでFTPサーバーを構築する方法を紹介します。Docker公式レジストリからイメージをPULLしてすぐ使えます。FTPは、社内システム開発など、まだまだ現役で使われている所が多いため、サクッと開発環境を構築したたい時に、DockerでFTPサーバーを構築できるのは便利です。FTPサーバーには「Pure-FTPd」を使用します。FTPサーバーのイメージをPULLDocker公式のレジストリから、FTPサーバー(stilliard/pure-ftpd)のイメージをPULLします。$ docker pull stilliard/pure-ftpd:latest Docker runでFTPサーバーを起動するPULLしたFTPサーバーのイメージを、以下のコマンドで起動します。$ docker run -d --name ftpd_server -p 21:21 -p 30000-30009:30000-30009 -e "PUBLICHOST=localhost" stilliard/pure-ftpd:latest 起動したコンテナのCONTAINER IDを調べます。$ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 44fdee748d14 stilliard/pure-ftpd:latest "/bin/sh -c '/run.sh…" 27 seconds ago Up 25 seconds 0.0.0.0:21->21/tcp, 0.0.0.0:30000-30009->30000-30009/tcp ftpd_server 調べたCONTAINER IDを指定して、コンテナにアクセスします。$ docker exec -it 44fdee748d14 bash FTPユー…

Docker for Macをインストール

Docker for MacをインストールDockerをHomebrewでインストールします。以下のコマンドを入力してDockerをインストールします。ちなみに、「Docker=ドッカー」と読みます。brew install docker 続いて、DockerのGUIアプリケーションをインストールします。以下のコマンドを入力します。brew cask install docker インストール完了後、「docker was successfully installed!」が表示されれば、インストール成功です。Docker for Macを起動するインストールが完了すると、MacのアプリケーションにDockerのアプリが追加されます。アイコンをダブルクリックしてDockerを起動しましょう。初回起動時のみ、次のイメージのような警告メッセージが表示されます。 [開く] をクリックしてアプリを起動しましょう。いくつか確認メッセージが出た後、管理者パスワードの入力を求められるので、入力しましょう。Dockerが起動されると、MacのメニューバーにDockerのアイコンが表示されます。また、起動と同時にDocker Hubのアカウントを求められますので、ログインしておきましょう。Docker Hubアカウントを持っていない場合は、こちらからアカウントを作成してください。メニューバーのDockerのアイコンをクリックすると、Dockerのメニューが表示されます。Docker起動中は、次のイメージのように 「Docker Ddesktop is running」 と表示されます。コンテナを起動するDockerを起動したら、基本の「hello-world」コンテナを起動してみましょう。以下のコマンドを入力してコンテナを起動します。docker run hello-world 以下のようの「Hello from Docker!」と表示されれば、起動成功です。Docker for Macを終了するDocker for Macを終了するには、メニューバーから [Quit Docker Desktop] を選択します。Dockerコンテナを停止する先述した「hello-world」コンテナは、起動時にメッセージを表示してすぐに停止するため、明示的に停止する必要はありませんでした。しかし…

Dockerでubuntuを起動する

Dockerでubuntuを起動するDockerでubuntuを起動する方法です。Dockerでubuntuを起動以下のコマンドで、Dockerでubuntuを起動できます。docker run -it ubuntu /bin/bash 起動すると、root権限でubuntuにアクセスできます。(@の後ろの数値部分はランダムはコンテナID)root@23161719a151:/# データの永続化 (ホストディレクトのマウント)Dockerは基本的にコンテナが終了すると、コンテナ内で作成したデータは全て削除されてしまいます。コンテナ内で作成したデータを永続化するには、ホストマシンのディレクトリをコンテナにマウントします。マウントするには、コンテナ起動時に-vオプションを使用します。docker run -v /ホストディレクトリ:/コンテナ内のディレクトリ -it ubuntu /bin/bash 以下は、ホストマシンの/User/hoge/dataディレクトリを、コンテナの/dataディレクトリにマウントする例です。docker run -v /User/hoge/data:/data -it ubuntu /bin/bash

POIでEXCELに画像を挿入する

POIでEXCELに画像を挿入するJAVA + Apache POIで、Excelに画像を挿入する方法を、サンプルコード付きで解説します。HSSF(.xls) と、XSSF(.xlsx) の両方に対応出来るコードで作成します。サンプルコード早速、サンプルコードです。コードの詳しい内容は、このサンプルコードの後で解説していますので、詳しく知りたい方は、そちらも参照してください。Workbook book =newXSSFWorkbook();//.xlsの場合は、new HSSFWorkbook() Sheet sheet = book.createSheet();//画像ファイルをByte配列に変換 InputStream in =newFileInputStream("image.jpg");byte[] bytes = IOUtils.toByteArray(in); in.close();//画像をworkbookに追加int pictureIdx = book.addPicture(bytes, Workbook.PICTURE_TYPE_JPEG);//Drawingインスタンスを取得 Drawing patriarch = sheet.createDrawingPatriarch();//ClientAnchorインスタンスを取得 ClientAnchor anchor = book.getCreationHelper().createClientAnchor();//画像挿入位置・サイズを指定する anchor.setCol1(1); anchor.setRow1(1); anchor.setCol2(6); anchor.setRow2(6);//オフセットを指定 anchor.setDx1(Units.EMU_PER_PIXEL *10); anchor.setDy1(Units.EMU_PER_PIXEL *10); anchor.setDx2(Units.EMU_PER_PIXEL *-10); anchor.setDy2(Units.EMU_PER_PIXEL *-10);//画像のアンカータイプを設定 anchor.setAnchorType(ClientAnchor.MOVE_AND_RESIZE);//指定した表示…

Bloggerのページとは?投稿との違いと使い所も解説

Bloggerのページとは?投稿との違いと使い所も解説Bloggerの「ページ」と「投稿」の違いが分からない!Bloggerのページって結局どんな時に使うの?と思っている方に、「ページ」と「投稿」の違いとページの使いどころについて解説していきます。Bloggerのページとは?Blogger管理画面の左メニューに「ページ」というメニューがあるのは知っているが、どういう用途で使うのかは分かっていない人が多いと思います。(私もそうでした…)Bloggerのページは、 [ページ] メニューから [新しいページを作成] をクリックして作成します。次のイメージは、Bloggerの「ページ」を作成する画面です。見て分かるように、「投稿」と同じように記事のタイトルや内容を書きます。写真の投稿やコメントの許可の設定など、基本的に「投稿」と同じです。一見すると「ページ」と「投稿」は何が違うか分かりません。一体何が違うのか、以降の内容で「ページ」と「投稿」の違いについて解説していきます。ページと投稿の違いと、使いどころBloggerの「ページ」と「投稿」の違いと、「ページ」の使いどころについて解説していきます。設定の違い以下は、「ページ」と「投稿」で設定できる項目の違いをまとめた表です。
「ページ」は、「投稿」にくらべ、ラベルなどのいくつかの設定ができません。ページ投稿ラベル-○スケジュール-○パーマリンク-○場所-○検索向け説明○○オプション○○ページは公開しても記事一覧に表示されない設定の違いとは別に、もう一つ大きな違いがあります。Bloggerのページは、投稿のように公開しただけではブログに表示も検索もされません。後述する詳しい説明で解説しますが、Bloggerのページは、ページガジェットを通じて、ブログのヘッダやサイドメニュー上にページへのリンクを表示することで、初めて公開されます。ページは「問い合わページ」など固定ページとして使う以上のように、Bloggerのページの使いどころは、記事としてではなく、「問い合わせページ」や「店舗案内」などの固定ページの用途で使うことが想定さています。ページを公開するここからは、Bloggerでページを作成して、公開するまでの手順を紹介します。
[ページの作成] → [レイアウトでページガジェット追加]の流れで作業してきます。ページ作成Blog…

MailKitのGetMimeTypeでMIMEタイプに変換できる拡張子一覧

MailKitのGetMimeTypeでMIMEタイプに変換できる拡張子一覧MailKitのMimeKit.MimeTypes.GetMimeTypeメソッドでMimeTypeに変換可能な拡張子を、以下の一覧にまとめました。(結構多いです)拡張子MimeTypem3dmfx-world/x-3dmf323text/h3233dmx-world/x-3dmf3g2video/3gpp23gpvideo/3gpp7zapplication/x-7z-compressedaabapplication/x-authorware-binaacaudio/aacaamapplication/x-authorware-mapaasapplication/x-authorware-segabctext/vnd.abcacgitext/htmlacxapplication/internet-property-streamaflvideo/animaflexaiapplication/postscriptaifaudio/aiffaifcaudio/aiffaiffaudio/aiffaimapplication/x-aimaiptext/x-audiosoft-intraaniapplication/x-navi-animationaosapplication/x-nokia-9000-communicator-add-on-softwareappcachetext/cache-manifestapplicationapplication/x-ms-applicationapsapplication/mimeartimage/x-jgasfvideo/x-ms-asfasmtext/x-asmasptext/aspasrvideo/x-ms-asfasxapplication/x-mplayer2atomapplication/atom+xmlauaudio/x-auavivideo/aviavsvideo/avs-videoaxsapplication/olescriptbastext/plainbcpioapplication/x-bcpiobinapplication/octet-streambmimage/bmpbmpimage/bmpbooapplication/book…

キーワード選定・構成・文書作成で文字単価0.5円って... | クラウドワークスのブラッグ案件紹介シリーズ

キーワード選定・構成・文書作成で文字単価0.5円って… | クラウドワークスのブラッグ案件紹介シリーズクラウドワークスは、在宅でリモートワークーの仕事が探せる便利なサイトです。この記事では、クラウドワークスに登録されいる仕事の中から、超低報酬のブラック案件を紹介していきます。私もクラウドワークスで仕事受けている1人のワーカーです。この記事はクラウドワークスを批判したい訳ではなく、クラウドワークスにはびこる「ブラック発注者(クライアント)」が絶滅して、クラウドワークスがより良いサービスになることを願って書いています。文字単価「0.5円」だけどブラックすぎる案件クラウドワークスに、こんな仕事が登録されていました。項目内容仕事の概要3000文字以上。とにかくPVが稼げる記事を募集報酬金額1,700円 (文字単価 0.5円)最低文字数2000文字この案件の文字単価は0.5円で低い方ですが、一見するとブラックと言えるほど低い単価ではありません。しかし、案件の詳細でこのブラック案件が正体を表しました。キーワード選定・構成もヨロシクたった0.5円の文字単価で、キーワード選定と記事構成もワーカーにやらせようとしています。
また、依頼内容に 「とにかくPVが稼げる記事を募集」 とある事から、きっとSEQ対策もヨロシクと言っているものと思われます。PVを稼ぐとなると、キーワード選定はキーワードプランナーを使って、しっかり検索ボリュームや競合性が低いキーワードを選定する必要があります。
さらに、記事構成についても、Google検索で上位のサイトを分析して、キーワードを挿入したりSEQ対策をしっかり施す必要があり、この2つの作業だけでも、場合によっては2時間程度必要になる場合があります。こうなってくると、「はっ?バカにしているの?」と聞きたくなるレベルで、酷い案件です。参考記事多すぎ!!案件の詳細に、「記事のイメージはこちらのURLを参照」と書かれており、そのには30個以上のURLが並べられていました。「多すぎて全部見れるかっ!」ワーカーの事を考えて、もっと絞って参考記事を提示するべきです。画像選定もヨロシク4枚以上の画像選定が必要とのことです。はぁ…もうこの時点で疲れ果てますね。。。という事で、はい、ブラック確定っ!この仕事するのに必要な時間このブラックを実際にやると、どの程度時間がか…

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…